Doghouse UiKit

10 #Nav Nav

10.1 #Nav.nav-dropdown Nav dropdown

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Creates dropdown nav bar.

Example
Markup 
 <ul class="duk-nav--dropdown">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
     <ul>
       <li><a href="#">Team</a></li>
       <li><a href="#">Location</a>
         <ul>
           <li><a href="#">Perth</a></li>
           <li><a href="#">Melbourne</a></li>
         </ul>
       </li>
       <li><a href="#">Tools</a></li>
     </ul>
   </li>
   <li><a href="#">Projects</a></li>
   <li><a href="#">Contact</a></li>
 </ul>
Source: scss/objects/_nav.scss, line 46

10.2 #Nav.nav-horizontal Nav horizontal

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Creates a navigation bar.

Example
Markup 
 <ul class="duk-nav--horizontal">
   <li><a href="#">Home</a>
   <li><a href="#">About</a>
   <li><a href="#">Projects</a>
   <li><a href="#">Contact</a>
 </ul>
Source: scss/objects/_nav.scss, line 4

10.3 #Nav.nav-pills Nav pills

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Create "pill" style nav, commonly used for tags and categories

Example
Markup 
 <ul class="duk-nav--pills">
   <li><a class="button--tertiary" href="#">Cats</a></li>
   <li><a class="button--tertiary" href="#">Dogs</a></li>
   <li><a class="button--tertiary" href="#">Birds</a></li>
   <li><a class="button--tertiary" href="#">Cows</a></li>
 </ul>
Source: scss/objects/_nav.scss, line 78

10.4 #Nav.nav-tabs Nav Tabs

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Create "pill" style nav, commonly used for tags and categories

Example
Markup 
 <ul class="duk-nav--tabs">
   <li><a href="#">Home</a></li>
   <li class="active"><a href="#">Profile</a></li>
   <li><a href="#">Team</a></li>
   <li><a href="#">Contact</a></li>
 </ul>
Source: scss/objects/_nav.scss, line 100

10.5 #Nav.nav-vertical Nav vertical

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Creates a vertical/stacked bar.

Example
Markup 
 <ul class="duk-nav--vertical">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Projects</a></li>
   <li><a href="#">Contact</a></li>
 </ul>
Source: scss/objects/_nav.scss, line 25