Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.

Navbar

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.


Left section

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.

Brand logos

Insert brand logos by adding an <img> tag with the class .nav-brand within a navbar's <div> tag.


<nav class="nav">
  <div class="nav-left">
    <img class="nav-brand" src="/assets/images/denali-logo.png"/>
  </div>
</nav>

Right section

Insert <div class="nav-right"> to place content to the right of the navbar.

Insert icons by adding <i> or <span> tags with the .d-icon and .d-$icon-name classes wrapped in <a class="nav-icon"> within a navbar's <div> tag.


 
<nav class="nav">
<div class="nav-left">
<img class="nav-brand" src="/assets/images/denali-logo.png" alt="" />
</div>
<div class="nav-right">
<a class="nav-icon"><i class="d-icon d-dashboard"></i></a>
<a class="nav-icon"><i class="d-icon d-menu-dialpad"></i></a>
<a class="nav-icon"><i class="d-icon d-user-profile-circle"></i></a>
</div>
</nav>
 

Center section

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.


 
<nav class="nav">
  <div class="nav-left">
    <img class="nav-brand" src="/assets/images/denali-logo.png" alt="" />
  </div>
  <div class="nav-right space-between-small-desktop-up">
    <div class="nav-group">
      <a class="nav-item is-active">Home</a>
      <a class="nav-item">About</a>
      <a class="nav-item">Contact</a>
    </div>
    <div class="nav-group">
      <a class="nav-icon"><i class="d-icon d-dashboard"></i><span class="nav-icon-text"></span></a>
      <a class="nav-icon"><i class="d-icon d-menu-dialpad"></i><span class="nav-icon-text"></span></a>
      <a class="nav-icon"><i class="d-icon d-user-profile-circle"></i><span class="nav-icon-text"></span></a>
    </div>
  </div>
</nav>
 
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>.


 
<nav class="nav">
  <div class="nav-left">
    <img class="nav-brand" src="/assets/images/denali-logo.png" alt="" />
  </div>
  <div class="nav-right">
    <div class="nav-group">
      <div class="input-group has-button">
        <div class="input is-inverse">
          <input type="text" placeholder="Search" />
        </div>
        <button class="button is-solid has-icon">
          <i class="d-icon d-search is-small"></i>
        </button>
      </div>
    </div>
    <div class="nav-group">
      <a class="nav-icon"><i class="d-icon d-dashboard"></i><span class="nav-icon-text"></span></a>
      <a class="nav-icon"><i class="d-icon d-menu-dialpad"></i><span class="nav-icon-text"></span></a>
      <a class="nav-icon"><i class="d-icon d-user-profile-circle"></i><span class="nav-icon-text"></span></a>
    </div>
  </div>
</nav>
 

Responsive

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.


 
<nav class="nav">
  <div class="nav-left">
    <img class="nav-brand" src="/assets/images/denali-logo.png" alt=""></img>
  </div>
  <a class="nav-icon nav-toggle-dropdown"><i class="d-icon d-more-vertical"></i></a>
  <div class="nav-right responsive">
    <a class="nav-item is-active">Home</a>
    <a class="nav-item">Climb</a>
    <a class="nav-item">Contact</a>
    <a class="nav-icon"><i class="d-icon d-dashboard"></i></a>
    <a class="nav-icon"><i class="d-icon d-menu-dialpad"></i></a>
    <a class="nav-icon"><i class="d-icon d-user-profile-circle"></i></a>
  </div>
</nav>
 
Apply tabindex="0" attribute to allow users to open the collapsed nav section when tabbing through the website.

Modifiers

Customize a navbar's background color by changing the $navbar-background-color sass variable or by inserting a background attribute in the <nav> tag and setting its value to a hex color code.


 
<nav class="nav" style="background:#0C301E;">
<div class="nav-left">
<img class="nav-brand" src="/assets/images/paas-logo.png" alt="" />
</div>
<div class="nav-right">
<a class="nav-icon"><i class="d-icon d-dashboard"></i></a>
<a class="nav-icon"><i class="d-icon d-menu-dialpad"></i></a>
<a class="nav-icon"><i class="d-icon d-user-profile-circle"></i></a>
</div>
</nav>
 

Variables

You can use these variables in a override.css file to customize this component.

Variable Name CSS Property
–navbar-bg-color background
–navbar-text-color color
–navbar-height height
–navbar-item-text-color color
–navbar-item-hover-text-color color
–navbar-item-active-text-color color
–navbar-item-active-border-color border-color