lintel-contrib-navbar

Navbar for lintel.

Getting Started

This module requires Lintel.

If you haven't used Lintel before, be sure to check out the Getting Started guide, as it explains how to install and use this module. Once you're familiar with that process, you may install this module with this command:

bower install lintel-contrib-navbar --save

Once the module has been installed, you will have to load it in your main SASS file:

@import "bower_components/lintel-contrib-navbar/sass/navbar.scss"

This module also includes a JavaScript component, which you will have to load separately.

<script src="bower_components/lintel-contrib-navbar/dist/navbar.min.js" type="text/javascript"></script>

You can use wiredep or grunt-wiredep to automatically inject files in your build process.

Variables

Check the vars file in the sass folder to see the full list of variables you can customize.

$navbar-x

Default value: true

Are you using .navbar-left or .navbar-right?

$navbar-collapsible

Default value: true

If you are using .navbar-left or .navbar-right, do you want it to expand/collapse? Automatically turns off if $navbar-x is false.

$navbar-scrollable

Default value: true

Do you want the navbar to hide when scrolling down and show when scrolling up? JavaScript setup required.

$navbar-collapsed-width

Default value: 70px

This applies to .navbar-left or .navbar-right.

$navbar-expanded-width

Default value: 360px

This applies to .navbar-left or .navbar-right.

$navbar-breakpoint-min

Default value: $screen-sm-min

Determines at which point navbar will collapse to mobile view.

$navbar-padding-y

Default value: $cushion-y-md

Default padding-top and padding-bottom for various navbar elements.

$navbar-padding-x

Default value: $cushion-x-md

Default padding-left and padding-right for various navbar elements.

$navbar-animate

Default value: $animate-slow

Transition speed for collapsing and hiding of navbar.

$navbar-height

Default value: 50px

Height of horizontal navbar.

$navbar-z-index

Default value: $z-index-xl

$navbar-title-font-size

Default value: 1em

$navbar-list-padding-y

Default value: ($navbar-height - ($font-size-base * $line-height-base)) / 2

Default padding-top and padding-bottom for navbar links.

$navbar-list-padding-x

Default value: $navbar-padding-x

Default padding-left and padding-right for navbar links.

$navbar-list-height

Default value: $navbar-height

Height of links for vertical navbar.

$navbar-toggle-bar-margin-y

Default value: 4px

Space between bars for mobile toggle.

$navbar-toggle-bar-width

Default value: 4px

Width of bars for mobile toggle.

$navbar-toggle-bar-padding-y

Default value: 8px

Padding-top and padding-bottom of mobile toggle.

$navbar-toggle-bar-padding-x

Default value: $navbar-toggle-padding-y - 1

Padding-left and padding-right of mobile toggle.

Default Theme

$navbar-bg

Default value: $bg-light

$navbar-bg-hover

Default value: shade($navbar-bg, 96.66%)

$navbar-bg-active

Default value: $navbar-bg-hover

$navbar-bg-brand

Default value: $navbar-bg

$navbar-border

Default value: $border-base

$navbar-border-brand

Default value: $navbar-border

$navbar-text

Default value: $text-base

$navbar-link

Default value: $navbar-text

$navbar-link-hover

Default value: $text-link

$navbar-link-active

Default value: $navbar-link-hover

Inverse Theme

$navbar-inverse-bg

Default value: $gray-dark

$navbar-inverse-bg-hover

Default value: shade($navbar-inverse-bg, 70%)

$navbar-inverse-bg-active

Default value: $navbar-inverse-bg-hover

$navbar-inverse-bg-brand

Default value: tint($navbar-inverse-bg, 90%)

$navbar-inverse-border

Default value: shade($navbar-inverse-bg, 70%)

$navbar-inverse-border-brand

Default value: shade($navbar-inverse-bg, 90%)

$navbar-inverse-text

Default value: $text-light

$navbar-inverse-link

Default value: $navbar-inverse-text

$navbar-inverse-link-hover

Default value: $text-lightest

$navbar-inverse-link-active

Default value: $navbar-inverse-link-hover

Mixins

Check the mixins file in the sass folder to see how you can extend this module.

navbar-theme($bg, $border, $text)

Default $bg: $navbar-bg
Default $bg-hover: $bg
Default $bg-active: $bg
Default $bg-brand: $bg
Default $bg-brand-hover: $bg
Default $border: $navbar-border
Default $border-brand: $border
Default $text: $navbar-text
Default $link: $navbar-link
Default $link-hover: $navbar-link-hover
Default $link-active: $navbar-link-active

Creates a new navbar theme.

.navbar {
  @include navbar-theme( 
    $bg: $navbar-bg, 
    $bg-hover: $bg, 
    $bg-active: $bg, 
    $bg-brand: $bg, 
    $bg-brand-hover: $bg, 
    $border: $navbar-border, 
    $border-brand: $border, 
    $text: $navbar-text, 
    $link: $navbar-link, 
    $link-hover: $navbar-link-hover, 
    $link-active: $navbar-link-active 
  );
}

JavaScript

Options

Name	Type	Default	Description
onInit	function		Callback function to execute when navbar is first initialized.
scroll	boolean	false	Hide/show navbar on scroll down/up.
scrollDelta	number	5	How much to scroll before hiding/showing.
scrollTimeout	number	100	How often to check scrolling. Bigger number = better performance but less responsive.
toggle	boolean	false	Hide navbar on init.
toggleCollapse	boolean	false	Expand navbar on init.

Methods

Name	Parameters	Description
toggle	(options, relatedTarget)	Toggle navbar. If provided, a related target will be available when events fire.
toggleCollapse	(options, relatedTarget)	Toggle collapse/expand view (for vertical navbars). If provided, a related target will be available when events fire.

Events

Event	Description
show.lt.navbar	Fires immediately before navbar is shown. Can prevent navbar from showing here.
shown.lt.navbar	Fires immediately after navbar is shown.
hide.lt.navbar	Fires immediately before navbar is hidden. Can prevent navbar from hiding here.
hidden.lt.navbar	Fires immediately after navbar is hidden.
expand.lt.navbar	Fires immediately before navbar is expanded. Can prevent navbar from expanding here.
expanded.lt.navbar	Fires immediately after navbar is expanded.
collapse.lt.navbar	Fires immediately before navbar is collapsed. Can prevent navbar from collapsing here.
collapsed.lt.navbar	Fires immediately after navbar is collapsed.

Data-attr

Add data-toggle="navbar" and data-target="#selector" to a button/element to toggle navbar on mobile screens. If the button is inside the navbar, it does not need the data-target attribute.

<nav class="navbar navbar-top navbar-fixed navbar-mobile">
  <div class="navbar-brand">
    <a href="#" class="navbar-toggle" data-toggle="navbar" data-target="#navbar" aria-label="Open main menu">
      <div class="navbar-toggle-bar" aria-hidden="true"></div>
    </a>
    <a href="/" class="navbar-brand-link">
      ...
    </a>
  </div>
</nav>
<nav class="navbar navbar-top navbar-fixed" id="navbar">
  ...
</nav>

jQuery

Call the jQuery plugin on the navbar, passing in any options and the related target (button).

$('#navbar').navbar({
  scroll: true
}, $('.navbar-mobile').find('[data-toggle="navbar"]'));

Examples

Basic Navbar

<nav class="navbar">...</nav>

Navbar Brand

<nav class="navbar navbar-top navbar-fixed">
  <div class="navbar-brand">
    <a href="#" class="navbar-toggle" data-toggle="navbar" aria-label="Close main menu">
      <div class="navbar-toggle-bar" aria-hidden="true"></div>
    </a>
    <a href="/" class="navbar-brand-link">
      <h1 class="navbar-title visible-sr">Lintel</h1>
      <img class="navbar-logo" src="http://placehold.it/100x35" alt="Logo">
    </a>
  </div>
  ...
</nav>

Navbar List

<nav class="navbar">
  <div class="navbar-brand">...</div>
  <ul class="navbar-list">
    <li>
      <a href="#">Home</a>
    </li>
    <li class="active">
      <a href="#">Profile</a>
    </li>
    <li class="btn-group">
      <a href="#" data-toggle="dropdown" type="button" aria-expanded="false">
        Dropdown
        <span class="btn-caret" aria-hidden="true"></span>
      </a>
      <ul class="dropdown navbar-dropdown" role="menu">
        <li><a href="#">Action 1</a></li>
        <li><a href="#">Action 2</a></li>
        <li><a href="#">Action 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

Navbar List Right

<ul class="navbar-list navbar-list-right">

Navbar Fixed Top

<nav class="navbar navbar-fixed navbar-top">...</nav>

Navbar Fixed Left

<nav class="navbar navbar-left">...</nav>

Vertical Navbar List Tooltips

<nav class="navbar navbar-left">
  ...
  <ul class="navbar-list">
    <li>
      <a href="#">
        <i class="fa fa-home navbar-list-icon" aria-hidden="true"></i> <span class="navbar-tooltip">Home</span>
      </a>
    </li>
  </ul>
</nav>

Mobile Navbar

<nav class="navbar navbar-top navbar-fixed navbar-mobile">
  <div class="navbar-brand">
    <a href="#" class="navbar-toggle" data-toggle="navbar" aria-label="Open main menu">
      <div class="navbar-toggle-bar" aria-hidden="true"></div>
    </a>
    <a href="/" class="navbar-brand-link">
      <h1 class="navbar-title">Lintel</h1>
      <img class="navbar-logo" src="http://placehold.it/100x35" alt="Logo">
    </a>
  </div>
</nav>

Complete Horizontal Example

<nav class="navbar navbar-top navbar-fixed navbar-mobile">
  <div class="navbar-brand">
    <a href="#" class="navbar-toggle" data-toggle="navbar" aria-label="Open main menu">
      <div class="navbar-toggle-bar" aria-hidden="true"></div>
    </a>
    <a href="/" class="navbar-brand-link">
      <h1 class="navbar-title">Lintel</h1>
      <img class="navbar-logo" src="http://placehold.it/100x35" alt="Logo">
    </a>
  </div>
</nav>
 
<nav class="navbar navbar-top navbar-fixed">
  <div class="navbar-brand">
    <a href="#" class="navbar-toggle" data-toggle="navbar" aria-label="Close main menu">
      <div class="navbar-toggle-bar" aria-hidden="true"></div>
    </a>
    <a href="/" class="navbar-brand-link">
      <h1 class="navbar-title visible-sr">Lintel</h1>
      <img class="navbar-logo" src="http://placehold.it/100x35" alt="Logo">
    </a>
  </div>
  <ul class="navbar-list">
    <li>
      <a href="#">Home</a>
    </li>
    <li class="active">
      <a href="#">Profile</a>
    </li>
    <li class="btn-group">
      <a href="#" data-toggle="dropdown" type="button" aria-expanded="false">
        Dropdown
        <span class="btn-caret" aria-hidden="true"></span>
      </a>
      <ul class="dropdown navbar-dropdown" role="menu">
        <li><a href="#">Action 1</a></li>
        <li><a href="#">Action 2</a></li>
        <li><a href="#">Action 3</a></li>
      </ul>
    </li>
  </ul>
  <ul class="navbar-list navbar-list-right">
    <li>
      <a href="#" class="btn btn-success btn-sm">Sign Up</a>
    </li>
    <li>
      <a href="#">Log In</a>
    </li>
  </ul>
</nav>

Complete Vertical Example

<nav class="navbar navbar-inverse navbar-left navbar-mobile">
  <div class="navbar-brand">
    <a href="#" class="navbar-toggle" data-toggle="navbar" aria-label="Open main menu">
      <div class="navbar-toggle-bar" aria-hidden="true"></div>
    </a>
    <a href="/" class="navbar-brand-link">
      <h1 class="navbar-title">Lintel</h1>
      <img class="navbar-logo" src="http://placehold.it/100x35" alt="Logo">
    </a>
  </div>
</nav>
 
<nav class="navbar navbar-inverse navbar-left" id="navbar">
  <div class="navbar-brand">
    <a href="#" class="navbar-toggle" aria-label="Close main menu">
      <div class="navbar-toggle-bar" aria-hidden="true"></div>
    </a>
    <a href="/" class="navbar-brand-link">
      <h1 class="navbar-title navbar-tooltip">Lintel</h1>
      <img class="navbar-logo" src="http://placehold.it/44x40" alt="Logo">
    </a>
  </div>
  <ul class="navbar-list">
    <li>
      <a href="#">
        <i class="fa fa-home navbar-list-icon" aria-hidden="true"></i> <span class="navbar-tooltip">Home</span>
      </a>
    </li>
    <li class="active">
      <a href="#">
        <i class="fa fa-user navbar-list-icon" aria-hidden="true"></i> <span class="navbar-tooltip">Profile</span>
      </a>
    </li>
    <li class="btn-group">
      <a href="#" data-toggle="dropdown" type="button" aria-expanded="false">
        <i class="fa fa-tasks navbar-list-icon" aria-hidden="true"></i> <span class="navbar-tooltip">Dropdown <span class="btn-caret" aria-hidden="true"></span></span>
      </a>
      <ul class="dropdown navbar-dropdown" role="menu">
        <li><a href="#">Action 1</a></li>
        <li><a href="#">Action 2</a></li>
        <li><a href="#">Action 3</a></li>
      </ul>
    </li>
  </ul>
  <ul class="navbar-list navbar-list-right">
    <li>
      <a href="#">
        <i class="fa fa-sign-in navbar-list-icon" aria-hidden="true"></i> <span class="navbar-tooltip">Log In</span>
      </a>
    </li>
    <li>
      <a href="#" data-toggle="navbar-collapse">
        <i class="fa fa-arrow-right navbar-list-icon" aria-hidden="true"></i>
      </a>
    </li>
  </ul>
</nav>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.