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.svg"/>
</div>
</nav>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

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.svg" 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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

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.svg" 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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';
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.svg" 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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

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.svg" 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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';
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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

Variables

You can use these variables to customize this component. Simply set one or multiple of these variables and recompile the SCSS.

$navbar-config:

Name Type Default value Computed value
backgound-color background #0A2D45  
text-color color $grey-100  
height height 60px  
nav-items:text-color color $grey-100  
nav-items:active-border-color border-color #3697F2