Navmenu

Navmenu option in bootstrap essentials is adapted from Jasny Bootstrap. Please visit Jasny Bootstap for more information

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

Custom width

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

Default navmenu

EXAMPLE
Brand
  • Link
  • Link
  • Dropdown
    • Action
    • Another action
    • Something else here
    • Separated link
    • One more separated link

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

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu navbar-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.

Fixed to left or right

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

Brand
  • Home
  • Link
  • Link

    <nav class="navmenu navbar-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 240px wide.


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

Make sure to include this after the Jasny Bootstrap CSS.

Off canvas

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

Brand
  • Home
  • Link
  • Link

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 navbar-default" role="navigation">
        <a class="navbar-brand" href="#">Brand</a>

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu navbar-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>
                        

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.

Inverted navmenu

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

EXAMPLE
Brand
  • Home
  • Link
  • Link

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