We've updated our documenation to align with our other frameworks. Our new documenation will
live here and these pages will be removed.
The Navbar is a horizontal bar that serves as the primary navigation for your product or site. Denali's navbar is versatile and responsive. It can contain a variety of elements including logos, links, icons, and search fields.
Implement a navbar by creating a <nav> tag and adding the .nav class. Then, insert <div class="nav-left"> to place content to the left of the navbar.
Insert brand logos by adding an <img> tag with the class .nav-brand within a navbar's <div> tag.
To create a center section add a .nav-right element and group center and right content using the .nav-group class. To center content on small desktop sizes and up add the .space-between-small-desktop-up helper class.
To insert nav links wrap link text in <a> tags with the .nav-item class. To set an active link add .is-active to the link's <a> tag.
Users who do not or cannot use pointing devices can tab through links. These links should be in a logical tabbing order, but if they aren't use the tabindex attribute to allow you to define the order. Apply these to nav-icons and nav-links.
To insert a search bar start with <div class="input-group has-button">. Inside, add < div class="input is-dark"> wrapped around < input type="text" placeholder="Search" /> followed by < button class="button is-primary has-icon"> wrapped around <i class="d-icon d-search is-small"></i>.
Add the class .responsive to a navbar’s .nav-right element to hide navbar content on mobile screen sizes. Add a link or “more” icon <i class="d-icon d-more-vertical"></i> wrapped in an <a> tag with the class nav-toggle-dropdownto display hidden navbar content on hover.