Navmenu

Navmenu is a vertical navigation component. By default it shares it look and feel with the navmenu component.

Custom width

The navmenu is 300px wide by default. You can change this by customizing the @navmenu-width variable or by setting the width of .navmenu in your CSS.


<nav class="navmenu navmenu-default" role="navigation">
  <a class="navmenu-brand" href="#">Brand</a>

  <ul class="nav navmenu-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu navmenu-nav" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</nav>

Make navmenus accessible

Be sure to add a role="navigation" to every navmenu to help with accessibility.

Add either .navmenu-fixed-left or .navmenu-fixed-right.


<nav class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm" role="navigation">
  ...
</nav>

Body padding required

The fixed navmenu will overlay your other content, unless you add padding to the left or right of the <body>. Try out your own values or use our snippet below. Tip: By default, the navmenu is 300px wide.


@media (min-width: 992px) {
  body {
    padding-left: 300px;
  }
}

Make sure to include this after the Jasny Bootstrap CSS.

With the offcanvas plugin, you can hide the navmenu off canvas. This is especially useful for screens with a small viewport.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.


<nav class="navmenu navmenu-default navmenu-fixed-left offcanvas" id="myNavmenu" role="navigation">
...
</nav>
<div class="navbar navbar-default navbar-fixed-top">
  <button class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body" type="button">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

Examples

There is a full example for an off canvas push menu as well as examples for an off canvas navmenu with an slide in and reveal effect.

Modify the look of the navmenu by adding .navmenu-inverse.


<nav class="navmenu navmenu-inverse" role="navigation">
  ...
</nav>

Alerts

Fixed to top / bottom

Add .alert-fixed-top top stick the alert on top of your page. Use .alert-fixed-bottom for the bottom.

Success! Your action has been completed succefully. 

<div class="alert alert-success alert-fixed-top">
  <strong>Success!</strong> Your action has been completed succefully.
</div>