variables: true
---
+{% capture navbar_basic_example %}
+<nav class="navbar" role="navigation" aria-label="main navigation">
+ <div class="navbar-brand">
+ <a class="navbar-item" href="{{ site.url }}">
+ <img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
+ </a>
+
+ <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </a>
+ </div>
+
+ <div id="navbarBasicExample" class="navbar-menu">
+ <div class="navbar-start">
+ <a class="navbar-item">
+ Home
+ </a>
+
+ <a class="navbar-item">
+ Documentation
+ </a>
+
+ <div class="navbar-item has-dropdown is-hoverable">
+ <a class="navbar-link">
+ More
+ </a>
+
+ <div class="navbar-dropdown">
+ <a class="navbar-item">
+ About
+ </a>
+ <a class="navbar-item">
+ Jobs
+ </a>
+ <a class="navbar-item">
+ Contact
+ </a>
+ <hr class="navbar-divider">
+ <a class="navbar-item">
+ Report an issue
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="navbar-end">
+ <div class="navbar-item">
+ <div class="buttons">
+ <a class="button is-primary">
+ <strong>Sign up</strong>
+ </a>
+ <a class="button is-light">
+ Log in
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+</nav>
+{% endcapture %}
+
{% capture navbar_example %}
{% include examples/navbar.html id="Default" %}
{% endcapture %}
</ul>
</div>
+{% include elements/anchor.html name="Basic Navbar" %}
+
+<div class="content">
+ <p>
+ To <strong>get started quickly</strong>, here is what a complete basic navbar looks like:
+ </p>
+</div>
+
+<div class="bd-example is-paddingless">
+ {{ navbar_basic_example }}
+</div>
+
+{% highlight html %}{{ navbar_basic_example }}{% endhighlight %}
+
{% include elements/anchor.html name="Navbar brand" %}
<div class="content">
+++ /dev/null
----
----
-
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Bulma test page</title>
- <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
- <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
- </head>
- <body>
- <!-- <object type="application/x-shockwave-flash" data="https://htmlreference.io/assets/golf.swf">
- <param name="movie" value="https://htmlreference.io/assets/golf.swf">
- <param name="wmode" value="transparent">
- <p>You need to enable Flash to view this content.</p>
- </object> -->
- <!-- <embed src="https://www.youtube.com/embed/kmk43_2dtn0" width="640" height="480"> -->
- <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hK8ONv4wcbA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
- <!-- <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> -->
- {% include global/navbar.html %}
- {% include index/focus.html %}
- <!-- {% include test/from-to.html %} -->
- <!-- {% include test/features.html %} -->
- <script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
- <script async defer type="text/javascript">(function(d, s, id) {
- var js, fjs = d.getElementsByTagName(s)[0];
- if (d.getElementById(id)) return;
- js = d.createElement(s); js.id = id;
- js.async = true;
- js.defer = true;
- js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
- fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script>
- <script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
- <script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
- <script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
- </body>
-</html>
projects / thirdparty / bulma.git / commitdiff
