navbar.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113
  1. ---
  2. title: Navbar
  3. layout: documentation
  4. doc-tab: components
  5. doc-subtab: navbar
  6. breadcrumb:
  7. - home
  8. - documentation
  9. - components
  10. - components-navbar
  11. meta:
  12. colors: true
  13. sizes: false
  14. variables: true
  15. ---
  16. {% capture navbar_example %}
  17. {% include examples/navbar.html id="Default" %}
  18. {% endcapture %}
  19. {% capture navbar_brand_example %}
  20. <nav class="navbar" role="navigation" aria-label="main navigation">
  21. <div class="navbar-brand">
  22. <!-- navbar items, navbar burger... -->
  23. </div>
  24. </nav>
  25. {% endcapture %}
  26. {% capture navbar_burger_example %}
  27. <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
  28. <span aria-hidden="true"></span>
  29. <span aria-hidden="true"></span>
  30. <span aria-hidden="true"></span>
  31. </a>
  32. {% endcapture %}
  33. {% capture navbar_brand_items_example %}
  34. <nav class="navbar" role="navigation" aria-label="main navigation">
  35. <div class="navbar-brand">
  36. <a class="navbar-item" href="{{ site.url }}">
  37. <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
  38. </a>
  39. <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
  40. <span aria-hidden="true"></span>
  41. <span aria-hidden="true"></span>
  42. <span aria-hidden="true"></span>
  43. </a>
  44. </div>
  45. </nav>
  46. {% endcapture %}
  47. {% capture navbar_menu_example %}
  48. <nav class="navbar" role="navigation" aria-label="main navigation">
  49. <div class="navbar-brand">
  50. <!-- navbar items, navbar burger... -->
  51. </div>
  52. <div class="navbar-menu">
  53. <!-- navbar start, navbar end -->
  54. </div>
  55. </nav>
  56. {% endcapture %}
  57. {% capture navbar_menu_active_example %}
  58. <div class="navbar-menu">
  59. <!-- hidden on mobile -->
  60. </div>
  61. <div class="navbar-menu is-active">
  62. <!-- shown on mobile -->
  63. </div>
  64. {% endcapture %}
  65. {% capture navbar_start_end_example %}
  66. <div class="navbar-menu">
  67. <div class="navbar-start">
  68. <!-- navbar items -->
  69. </div>
  70. <div class="navbar-end">
  71. <!-- navbar items -->
  72. </div>
  73. </div>
  74. {% endcapture %}
  75. {% capture navbar_item_link_example %}
  76. <a class="navbar-item">
  77. Home
  78. </a>
  79. {% endcapture %}
  80. {% capture navbar_item_brand_example %}
  81. <a class="navbar-item">
  82. <img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28" alt="Bulma">
  83. </a>
  84. {% endcapture %}
  85. {% capture navbar_item_dropdown_example %}
  86. <div class="navbar-item has-dropdown">
  87. <a class="navbar-link">
  88. Docs
  89. </a>
  90. <div class="navbar-dropdown">
  91. <!-- Other navbar items -->
  92. </div>
  93. </div>
  94. {% endcapture %}
  95. {% capture navbar_item_dropdown_bis_example %}
  96. <div class="navbar-dropdown">
  97. <a class="navbar-item">
  98. Overview
  99. </a>
  100. </div>
  101. {% endcapture %}
  102. {% capture navbar_item_other_example %}
  103. <div class="navbar-item">
  104. <div class="field is-grouped">
  105. <p class="control">
  106. <a class="button">
  107. <span class="icon">
  108. <i class="fas fa-twitter" aria-hidden="true"></i>
  109. </span>
  110. <span>Tweet</span>
  111. </a>
  112. </p>
  113. <p class="control">
  114. <a class="button is-primary">
  115. <span class="icon">
  116. <i class="fas fa-download" aria-hidden="true"></i>
  117. </span>
  118. <span>Download</span>
  119. </a>
  120. </p>
  121. </div>
  122. </div>
  123. {% endcapture %}
  124. {% capture navbar_transparent_example %}
  125. {% include examples/navbar.html transparent=true boxed=true id="TransparentExample" %}
  126. {% endcapture %}
  127. {% capture navbar_dropdown_example %}
  128. <nav class="navbar" role="navigation" aria-label="dropdown navigation">
  129. <div class="navbar-item has-dropdown">
  130. <a class="navbar-link">
  131. Docs
  132. </a>
  133. <div class="navbar-dropdown">
  134. <a class="navbar-item">
  135. Overview
  136. </a>
  137. <a class="navbar-item">
  138. Elements
  139. </a>
  140. <a class="navbar-item">
  141. Components
  142. </a>
  143. <hr class="navbar-divider">
  144. <div class="navbar-item">
  145. Version {{ site.data.meta.version }}
  146. </div>
  147. </div>
  148. </div>
  149. </nav>
  150. {% endcapture %}
  151. {% capture navbar_dropdown_hover_snippet %}
  152. <div class="navbar-item has-dropdown is-hoverable">
  153. <!-- navbar-link, navbar-dropdown etc. -->
  154. </div>
  155. {% endcapture %}
  156. {% capture navbar_dropdown_hover_example %}
  157. <nav class="navbar" role="navigation" aria-label="dropdown navigation">
  158. <div class="navbar-item has-dropdown is-hoverable">
  159. <a class="navbar-link">
  160. Docs
  161. </a>
  162. <div class="navbar-dropdown">
  163. <a class="navbar-item">
  164. Overview
  165. </a>
  166. <a class="navbar-item">
  167. Elements
  168. </a>
  169. <a class="navbar-item">
  170. Components
  171. </a>
  172. <hr class="navbar-divider">
  173. <div class="navbar-item">
  174. Version {{ site.data.meta.version }}
  175. </div>
  176. </div>
  177. </div>
  178. </nav>
  179. {% endcapture %}
  180. {% capture navbar_dropdown_active_snippet %}
  181. <div class="navbar-item has-dropdown is-active">
  182. <!-- navbar-link, navbar-dropdown etc. -->
  183. </div>
  184. {% endcapture %}
  185. {% capture navbar_dropdown_active_example %}
  186. <nav class="navbar" role="navigation" aria-label="dropdown navigation">
  187. <div class="navbar-item has-dropdown is-active">
  188. <a class="navbar-link">
  189. Docs
  190. </a>
  191. <div class="navbar-dropdown">
  192. <a class="navbar-item">
  193. Overview
  194. </a>
  195. <a class="navbar-item">
  196. Elements
  197. </a>
  198. <a class="navbar-item">
  199. Components
  200. </a>
  201. <hr class="navbar-divider">
  202. <div class="navbar-item">
  203. Version {{ site.data.meta.version }}
  204. </div>
  205. </div>
  206. </div>
  207. </nav>
  208. {% endcapture %}
  209. {% capture navbar_dropdown_right_snippet %}
  210. <div class="navbar-dropdown is-right">
  211. <!-- navbar-item, navbar-divider etc. -->
  212. </div>
  213. {% endcapture %}
  214. {% capture navbar_dropdown_right_example %}
  215. <nav class="navbar" role="navigation" aria-label="dropdown navigation">
  216. <div class="navbar-menu">
  217. <div class="navbar-start">
  218. <div class="navbar-item has-dropdown is-active">
  219. <a class="navbar-link">
  220. Left
  221. </a>
  222. <div class="navbar-dropdown">
  223. <a class="navbar-item">
  224. Overview
  225. </a>
  226. <a class="navbar-item">
  227. Elements
  228. </a>
  229. <a class="navbar-item">
  230. Components
  231. </a>
  232. <hr class="navbar-divider">
  233. <div class="navbar-item">
  234. Version {{ site.data.meta.version }}
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. <div class="navbar-end">
  240. <div class="navbar-item has-dropdown is-active">
  241. <a class="navbar-link">
  242. Right
  243. </a>
  244. <div class="navbar-dropdown is-right">
  245. <a class="navbar-item">
  246. Overview
  247. </a>
  248. <a class="navbar-item">
  249. Elements
  250. </a>
  251. <a class="navbar-item">
  252. Components
  253. </a>
  254. <hr class="navbar-divider">
  255. <div class="navbar-item">
  256. Version {{ site.data.meta.version }}
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. </nav>
  263. <section class="hero is-primary">
  264. <div class="hero-body">
  265. <p class="title">
  266. Documentation
  267. </p>
  268. <p class="subtitle">
  269. Everything you need to <strong>create a website</strong> with Bulma
  270. </p>
  271. </div>
  272. </section>
  273. {% endcapture %}
  274. {% capture navbar_dropup_snippet %}
  275. <div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
  276. <a class="navbar-link" href="/documentation/overview/start/">
  277. Docs
  278. </a>
  279. <div class="navbar-dropdown">
  280. <a class="navbar-item" href="/documentation/overview/start/">
  281. Overview
  282. </a>
  283. </div>
  284. </div>
  285. {% endcapture %}
  286. {% capture navbar_dropup_example %}
  287. <section class="hero is-primary">
  288. <div class="hero-body">
  289. <p class="title">
  290. Documentation
  291. </p>
  292. <p class="subtitle">
  293. Everything you need to <strong>create a website</strong> with Bulma
  294. </p>
  295. </div>
  296. </section>
  297. <nav class="navbar" role="navigation" aria-label="dropdown navigation">
  298. <div class="navbar-menu">
  299. <div class="navbar-start">
  300. <div class="navbar-item has-dropdown has-dropdown-up is-active">
  301. <a class="navbar-link">
  302. Dropup
  303. </a>
  304. <div class="navbar-dropdown">
  305. <a class="navbar-item">
  306. Overview
  307. </a>
  308. <a class="navbar-item">
  309. Elements
  310. </a>
  311. <a class="navbar-item">
  312. Components
  313. </a>
  314. <hr class="navbar-divider">
  315. <div class="navbar-item">
  316. Version {{ site.data.meta.version }}
  317. </div>
  318. </div>
  319. </div>
  320. </div>
  321. </div>
  322. </nav>
  323. {% endcapture %}
  324. {% capture navbar_dropdown_default_example %}
  325. <nav class="navbar" role="navigation" aria-label="dropdown navigation">
  326. <a class="navbar-item">
  327. <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
  328. </a>
  329. <div class="navbar-item has-dropdown is-active">
  330. <a class="navbar-link">
  331. Docs
  332. </a>
  333. <div class="navbar-dropdown">
  334. <a class="navbar-item">
  335. Overview
  336. </a>
  337. <a class="navbar-item">
  338. Elements
  339. </a>
  340. <a class="navbar-item">
  341. Components
  342. </a>
  343. <hr class="navbar-divider">
  344. <div class="navbar-item">
  345. Version {{ site.data.meta.version }}
  346. </div>
  347. </div>
  348. </div>
  349. </nav>
  350. <section class="hero is-primary">
  351. <div class="hero-body">
  352. <p class="title">
  353. Documentation
  354. </p>
  355. <p class="subtitle">
  356. Everything you need to <strong>create a website</strong> with Bulma
  357. </p>
  358. </div>
  359. </section>
  360. {% endcapture %}
  361. {% capture navbar_dropdown_boxed_example %}
  362. <nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
  363. <a class="navbar-item">
  364. <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
  365. </a>
  366. <div class="navbar-item has-dropdown is-active">
  367. <a class="navbar-link">
  368. Docs
  369. </a>
  370. <div class="navbar-dropdown is-boxed">
  371. <a class="navbar-item">
  372. Overview
  373. </a>
  374. <a class="navbar-item">
  375. Elements
  376. </a>
  377. <a class="navbar-item">
  378. Components
  379. </a>
  380. <hr class="navbar-divider">
  381. <div class="navbar-item">
  382. Version {{ site.data.meta.version }}
  383. </div>
  384. </div>
  385. </div>
  386. </nav>
  387. <section class="hero">
  388. <div class="hero-body">
  389. <p class="title">
  390. Documentation
  391. </p>
  392. <p class="subtitle">
  393. Everything you need to <strong>create a website</strong> with Bulma
  394. </p>
  395. </div>
  396. </section>
  397. {% endcapture %}
  398. {% capture navbar_dropdown_item_active_example %}
  399. <nav class="navbar" role="navigation" aria-label="dropdown navigation">
  400. <a class="navbar-item">
  401. <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
  402. </a>
  403. <div class="navbar-item has-dropdown is-active">
  404. <a class="navbar-link">
  405. Docs
  406. </a>
  407. <div class="navbar-dropdown">
  408. <a class="navbar-item">
  409. Overview
  410. </a>
  411. <a class="navbar-item is-active">
  412. Elements
  413. </a>
  414. <a class="navbar-item">
  415. Components
  416. </a>
  417. <hr class="navbar-divider">
  418. <div class="navbar-item">
  419. Version {{ site.data.meta.version }}
  420. </div>
  421. </div>
  422. </div>
  423. </nav>
  424. <section class="hero is-primary">
  425. <div class="hero-body">
  426. <p class="title">
  427. Documentation
  428. </p>
  429. <p class="subtitle">
  430. Everything you need to <strong>create a website</strong> with Bulma
  431. </p>
  432. </div>
  433. </section>
  434. {% endcapture %}
  435. {% capture navbar_divider_example %}
  436. <hr class="navbar-divider">
  437. {% endcapture %}
  438. {% capture navbar_js_html %}
  439. <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
  440. <span aria-hidden="true"></span>
  441. <span aria-hidden="true"></span>
  442. <span aria-hidden="true"></span>
  443. </a>
  444. <div class="navbar-menu" id="navMenu">
  445. <!-- navbar-start, navbar-end... -->
  446. </div>
  447. {% endcapture %}
  448. {% capture navbar_js_code %}
  449. document.addEventListener('DOMContentLoaded', function () {
  450. // Get all "navbar-burger" elements
  451. var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  452. // Check if there are any navbar burgers
  453. if ($navbarBurgers.length > 0) {
  454. // Add a click event on each of them
  455. $navbarBurgers.forEach(function ($el) {
  456. $el.addEventListener('click', function () {
  457. // Get the target from the "data-target" attribute
  458. var target = $el.dataset.target;
  459. var $target = document.getElementById(target);
  460. // Toggle the class on both the "navbar-burger" and the "navbar-menu"
  461. $el.classList.toggle('is-active');
  462. $target.classList.toggle('is-active');
  463. });
  464. });
  465. }
  466. });
  467. {% endcapture %}
  468. {% capture navbar_color_markup %}
  469. <nav class="navbar is-primary">
  470. <!-- navbar brand, navbar menu... -->
  471. </nav>
  472. {% endcapture %}
  473. <div class="content">
  474. <p>
  475. The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
  476. </p>
  477. <ul>
  478. <li>
  479. <code>navbar</code> the <strong>main</strong> container
  480. <ul>
  481. <li>
  482. <code>navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
  483. <ul>
  484. <li>
  485. <code>navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
  486. </li>
  487. </ul>
  488. </li>
  489. <li>
  490. <code>navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
  491. <ul>
  492. <li>
  493. <code>navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
  494. </li>
  495. <li>
  496. <code>navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
  497. <ul>
  498. <li>
  499. <code>navbar-item</code> each <strong>single item</strong> of the navbar, which can either be an <code>a</code> or a <code>div</code>
  500. <ul>
  501. <li>
  502. <code>navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
  503. </li>
  504. <li>
  505. <code>navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
  506. <ul>
  507. <li>
  508. <code>navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
  509. </li>
  510. </ul>
  511. </li>
  512. </ul>
  513. </li>
  514. </ul>
  515. </li>
  516. </ul>
  517. </li>
  518. </ul>
  519. </li>
  520. </ul>
  521. </div>
  522. {% include elements/anchor.html name="Navbar brand" %}
  523. <div class="content">
  524. <p>
  525. The <code>navbar-brand</code> is the left side of the navbar. It can contain:
  526. </p>
  527. <ul>
  528. <li>
  529. a number of <code>navbar-item</code>
  530. </li>
  531. <li>
  532. the <code>navbar-burger</code> as last child
  533. </li>
  534. </ul>
  535. </div>
  536. {% highlight html %}{{navbar_brand_example}}{% endhighlight %}
  537. <div class="content">
  538. <p>
  539. The navbar brand is <strong>always visible</strong>: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
  540. </p>
  541. </div>
  542. <div class="bd-example is-paddingless">
  543. {{navbar_brand_items_example}}
  544. </div>
  545. {% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
  546. <div class="content">
  547. <p>
  548. On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
  549. </p>
  550. </div>
  551. {% include elements/anchor.html name="Navbar burger" %}
  552. <div class="content">
  553. <p>
  554. The <code>navbar-burger</code> is a hamburger menu that only appears on <strong>mobile</strong>. It has to appear as the last child of <code>navbar-brand</code>.
  555. </p>
  556. </div>
  557. <div class="example is-paddingless">
  558. <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
  559. <span aria-hidden="true"></span>
  560. <span aria-hidden="true"></span>
  561. <span aria-hidden="true"></span>
  562. </a>
  563. </div>
  564. {% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
  565. <div class="content">
  566. <p>
  567. You can add the modifier class <code>is-active</code> to turn it into a cross.
  568. </p>
  569. </div>
  570. <div class="example is-paddingless">
  571. <a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
  572. <span aria-hidden="true"></span>
  573. <span aria-hidden="true"></span>
  574. <span aria-hidden="true"></span>
  575. </a>
  576. </div>
  577. {% include elements/anchor.html name="Navbar menu" %}
  578. <div class="content">
  579. <p>
  580. The <code>navbar-menu</code> is the <strong>counterpart</strong> of the navbar brand. As such, it must appear as a direct child of <code>navbar</code>, as a sibling of <code>navbar-brand</code>.
  581. </p>
  582. </div>
  583. {% highlight html %}{{navbar_menu_example}}{% endhighlight %}
  584. <div class="content">
  585. <p>
  586. The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
  587. </p>
  588. </div>
  589. {% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
  590. <div class="content">
  591. <p>
  592. On desktop {% include bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
  593. </p>
  594. <ul>
  595. <li>
  596. <code>navbar-start</code>
  597. </li>
  598. <li>
  599. <code>navbar-end</code>
  600. </li>
  601. </ul>
  602. </div>
  603. <hr>
  604. <div id="navbarJsExample" class="message is-info">
  605. <h4 class="message-header">Javascript toggle</h4>
  606. <div class="message-body">
  607. <div class="content">
  608. <p>
  609. The Bulma package <strong>does not come with any JavaScript</strong>.
  610. <br>
  611. Here is however an implementation example, which toggles the class <code>is-active</code> on both the <code>navbar-burger</code> and the targeted <code>navbar-menu</code>.
  612. </p>
  613. {% highlight html %}{{ navbar_js_html }}{% endhighlight %}
  614. {% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
  615. </div>
  616. </div>
  617. </div>
  618. {% include elements/anchor.html name="Navbar start and navbar end" %}
  619. <div class="content">
  620. <p>
  621. The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
  622. </p>
  623. <p>
  624. On desktop {% include bp/desktop.html %}:
  625. </p>
  626. <ul>
  627. <li>
  628. <code>navbar-start</code> will appear on the <strong>left</strong>
  629. </li>
  630. <li>
  631. <code>navbar-end</code> will appear on the <strong>right</strong>
  632. </li>
  633. </ul>
  634. <p>
  635. Each of them can contain any number of <code>navbar-item</code>.
  636. </p>
  637. </div>
  638. {% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
  639. {% include elements/anchor.html name="Navbar item" %}
  640. <div class="content">
  641. <p>
  642. A <code>navbar-item</code> is a repeatable element that can be:
  643. </p>
  644. <ul class="bd-spaced">
  645. <li>
  646. a navigation <strong>link</strong>
  647. {% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
  648. </li>
  649. <li>
  650. a container for the <strong>brand logo</strong>
  651. {% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
  652. </li>
  653. <li>
  654. the <strong>parent</strong> of a dropdown menu
  655. {% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
  656. </li>
  657. <li>
  658. a child of a <strong>navbar dropdown</strong>
  659. {% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
  660. </li>
  661. <li>
  662. a container for almost <strong>anything</strong> you want, like a <code>field</code>
  663. <div class="highlight-full">
  664. {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
  665. </div>
  666. </li>
  667. </ul>
  668. <p>
  669. It can either be an anchor tag <code>&lt;a&gt;</code> or a <code>&lt;div&gt;</code>, as a <strong>direct child</strong> of either:
  670. </p>
  671. <ul>
  672. <li>
  673. <code>navbar</code>
  674. </li>
  675. <li>
  676. <code>navbar-brand</code>
  677. </li>
  678. <li>
  679. <code>navbar-start</code>
  680. </li>
  681. <li>
  682. <code>navbar-end</code>
  683. </li>
  684. <li>
  685. <code>navbar-dropdown</code>
  686. </li>
  687. </ul>
  688. <p>
  689. You can add the modifier class <code>is-expanded</code> to turn it into a full-width element.
  690. </p>
  691. </div>
  692. {% include elements/anchor.html name="Transparent navbar" %}
  693. <div class="content">
  694. <p>
  695. To seamlessly integrate the navbar in any visual context, you can add the <code>is-transparent</code> modifier on the <code>navbar</code> component. This will remove any hover or active background from the navbar items.
  696. </p>
  697. </div>
  698. {% include elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
  699. {% include elements/anchor.html name="Fixed navbar" %}
  700. {% include elements/new-tag.html version="0.6.1" %}
  701. <div class="content">
  702. <p>
  703. You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
  704. </p>
  705. <ul class="bd-spaced">
  706. <li>
  707. Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
  708. {% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
  709. </li>
  710. <li>
  711. Add the corresponding <code>has-navbar-fixed-top</code> or <code>has-navbar-fixed-bottom</code> modifier to either <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> element to provide the appropriate padding to the page
  712. {% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
  713. </li>
  714. </ul>
  715. </div>
  716. <h4 class="title is-5">Try it out!</h4>
  717. <div id="navbarToggles" class="buttons">
  718. <a id="navbarFixBottom" class="button is-link">
  719. <span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span>
  720. </a>
  721. </div>
  722. {% include elements/anchor.html name="Dropdown menu" %}
  723. <div class="content">
  724. <p>
  725. To create a <strong>dropdown menu</strong>, you will need <strong>4</strong> elements:
  726. </p>
  727. <ul>
  728. <li>
  729. <code>navbar-item</code> with the <code>has-dropdown</code> modifier
  730. </li>
  731. <li>
  732. <code>navbar-link</code> which contains the dropdown arrow
  733. </li>
  734. <li>
  735. <code>navbar-dropdown</code> which can contain instances of <code>navbar-item</code> and <code>navbar-divider</code>
  736. </li>
  737. </ul>
  738. </div>
  739. <div class="columns">
  740. <div class="column">
  741. <div class="bd-example is-paddingless">
  742. {{ navbar_dropdown_example }}
  743. </div>
  744. </div>
  745. <div class="column">
  746. {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
  747. </div>
  748. </div>
  749. <h4 class="title is-4">
  750. Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
  751. </h4>
  752. <div class="content">
  753. <p>
  754. The <code>navbar-dropdown</code> is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
  755. </p>
  756. <p>
  757. The <code>navbar-item</code> with the <code>has-dropdown</code> modifier, has <strong>2 additional modifiers</strong>
  758. </p>
  759. <ul>
  760. <li>
  761. <code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the parent <code>navbar-item</code>
  762. </li>
  763. <li>
  764. <code>is-active</code>: the dropdown will show up <strong>all the time</strong>
  765. </li>
  766. </ul>
  767. </div>
  768. <div class="message is-success">
  769. <p class="message-body">
  770. While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
  771. </p>
  772. </div>
  773. {% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %}
  774. <div class="columns">
  775. <div class="column">
  776. <div class="bd-example is-paddingless">
  777. {{ navbar_dropdown_hover_example }}
  778. </div>
  779. </div>
  780. <div class="column">
  781. {% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
  782. </div>
  783. </div>
  784. {% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %}
  785. <div class="columns">
  786. <div class="column">
  787. <div class="bd-example is-paddingless">
  788. {{ navbar_dropdown_active_example }}
  789. </div>
  790. </div>
  791. <div class="column">
  792. {% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
  793. </div>
  794. </div>
  795. <h4 class="title is-4">
  796. Right dropdown
  797. </h4>
  798. <div class="content">
  799. <p>
  800. If your parent <code>navbar-item</code> is on the right side, you can position the dropdown to start from the <strong>right</strong> with the <code>is-right</code> modifier.
  801. </p>
  802. </div>
  803. {% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
  804. <div class="columns">
  805. <div class="column">
  806. <div class="bd-example is-paddingless">
  807. {{ navbar_dropdown_right_example }}
  808. </div>
  809. </div>
  810. <div class="column">
  811. {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
  812. </div>
  813. </div>
  814. <h4 class="title is-4">
  815. Dropup
  816. </h4>
  817. {% include elements/new-tag.html version="0.6.1" %}
  818. <div class="content">
  819. <p>
  820. If you're using a navbar at the bottom, like the <a href="#fixed-navbar">fixed bottom navbar</a>, you might want to use a <strong>dropup menu</strong>. Simply add the <code>has-dropdown</code> and <code>has-dropdown-up</code> modifiers to the parent <code>navbar-item</code>.
  821. </p>
  822. </div>
  823. {% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
  824. <div class="columns">
  825. <div class="column">
  826. <div class="bd-example is-paddingless">
  827. {{ navbar_dropup_example }}
  828. </div>
  829. </div>
  830. <div class="column">
  831. {% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
  832. </div>
  833. </div>
  834. <h4 class="title is-4">
  835. Styles for the dropdown menu
  836. </h4>
  837. <div class="content">
  838. <p>
  839. By default, the <code>navbar-dropdown</code> has:
  840. </p>
  841. <ul>
  842. <li>
  843. a grey <code>border-top</code>
  844. </li>
  845. <li>
  846. a <code>border-radius</code> at both bottom corners
  847. </li>
  848. </ul>
  849. </div>
  850. <div class="columns">
  851. <div class="column">
  852. <div class="bd-example is-paddingless">
  853. {{ navbar_dropdown_default_example }}
  854. </div>
  855. </div>
  856. <div class="column">
  857. {% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
  858. </div>
  859. </div>
  860. <div class="content">
  861. <p>
  862. When having a <a href="#transparent-navbar">transparent navbar</a>, it is preferable to use the boxed version of the dropdown, by using the <code>is-boxed</code> modifier.
  863. </p>
  864. <ul>
  865. <li>
  866. the grey border is <strong>removed</strong>
  867. </li>
  868. <li>
  869. a slight <strong>inner shadow</strong> is added
  870. </li>
  871. <li>
  872. all corners are <strong>rounded</strong>
  873. </li>
  874. <li>
  875. the hover/active state is <strong>animated</strong>
  876. </li>
  877. </ul>
  878. </div>
  879. <div class="columns">
  880. <div class="column">
  881. <div class="bd-example is-paddingless">
  882. {{ navbar_dropdown_boxed_example }}
  883. </div>
  884. </div>
  885. <div class="column">
  886. {% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
  887. </div>
  888. </div>
  889. <h4 class="title is-4">
  890. Active dropdown navbar item
  891. </h4>
  892. <div class="columns">
  893. <div class="column">
  894. <div class="bd-example is-paddingless">
  895. {{ navbar_dropdown_item_active_example }}
  896. </div>
  897. </div>
  898. <div class="column">
  899. {% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
  900. </div>
  901. </div>
  902. <h4 class="title is-4">
  903. Dropdown divider
  904. </h4>
  905. <div class="content">
  906. <p>
  907. You can add a <code>navbar-divider</code> to display a <strong>horizontal rule</strong> in a <code>navbar-dropdown</code>.
  908. </p>
  909. </div>
  910. {% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
  911. {% include elements/anchor.html name="Colors" %}
  912. <div class="tags has-addons">
  913. <span class="tag">New!</span>
  914. <span class="tag is-info">0.5.2</span>
  915. </div>
  916. <div class="content">
  917. <p>
  918. You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong>
  919. </p>
  920. <ul>
  921. <li><code>is-primary</code></li>
  922. <li><code>is-link</code></li>
  923. <li><code>is-info</code></li>
  924. <li><code>is-success</code></li>
  925. <li><code>is-warning</code></li>
  926. <li><code>is-danger</code></li>
  927. <li><code>is-black</code></li>
  928. <li><code>is-dark</code></li>
  929. <li><code>is-light</code></li>
  930. <li><code>is-white</code></li>
  931. </ul>
  932. </div>
  933. {% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
  934. <div class="bd-example is-paddingless">
  935. {% include examples/navbar-color.html color="primary" %}
  936. </div>
  937. <div class="bd-example is-paddingless">
  938. {% include examples/navbar-color.html color="link" %}
  939. </div>
  940. <div class="bd-example is-paddingless">
  941. {% include examples/navbar-color.html color="info" %}
  942. </div>
  943. <div class="bd-example is-paddingless">
  944. {% include examples/navbar-color.html color="success" %}
  945. </div>
  946. <div class="bd-example is-paddingless">
  947. {% include examples/navbar-color.html color="warning" light=true %}
  948. </div>
  949. <div class="bd-example is-paddingless">
  950. {% include examples/navbar-color.html color="danger" %}
  951. </div>
  952. <div class="bd-example is-paddingless">
  953. {% include examples/navbar-color.html color="black" %}
  954. </div>
  955. <div class="bd-example is-paddingless">
  956. {% include examples/navbar-color.html color="dark" %}
  957. </div>
  958. <div class="bd-example is-paddingless">
  959. {% include examples/navbar-color.html color="light" light=true %}
  960. </div>
  961. <div class="bd-example is-paddingless">
  962. {% include examples/navbar-color.html color="white" light=true %}
  963. </div>
  964. {% include elements/variables.html type='component' %}