Lexicon v1.0.32

Navbars

Base Navbar

Default style navbar. The mark up deviates from Bootstrap 3's mark up with two navbar-headers. This allows us to preserve the tab order for keyboard users.

<nav class="navbar navbar-default">
    <div class="navbar-header navbar-header-left-xs">
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="navbar-header navbar-header-right">
        <button aria-expanded="false" class="collapsed navbar-toggle" data-target="#navbar-collapse-0" data-toggle="collapse" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span aria-hidden="true" class="icon-bar"></span>
            <span aria-hidden="true" class="icon-bar"></span>
            <span aria-hidden="true" class="icon-bar"></span>
        </button>
    </div>

    <div aria-expanded="false" class="collapse navbar-collapse" id="navbar-collapse-0">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li class="dropdown">
                <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input class="form-control" placeholder="Search" type="text">
            </div>
            <button class="btn btn-default" type="submit">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

The basic search component was created specifically for search bars inside a navbar. We wanted a search bar that fills the remaining space. The minimum width of the input is 100px and maximum width is 300px.

When using .basic-search, elements should be floated around it. .basic-search should be float: none; and always be the last element declared in a group of floated elements.

Add class basic-search-autofit on the form to make basic-search fill remaining space. Tab order cannot be preserved with this pattern, the search bar is focused last.

<nav class="navbar navbar-default">
    <div class="navbar-header navbar-header-left-xs">
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="navbar-header navbar-header-right">
        <button aria-expanded="false" class="collapsed navbar-toggle" data-target="#navbar-collapse-2" data-toggle="collapse" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span aria-hidden="true" class="icon-bar"></span>
            <span aria-hidden="true" class="icon-bar"></span>
            <span aria-hidden="true" class="icon-bar"></span>
        </button>
    </div>

    <div aria-expanded="false" class="collapse navbar-collapse" id="navbar-collapse-2">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
                <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
        <form class="basic-search basic-search-autofit input-group navbar-form">
            <div class="input-group-input">
                <input class="form-control" placeholder=" Search..." type="text" />
            </div>

            <div class="input-group-btn">
                <button class="btn btn-default" type="submit">
                    <span aria-hidden="true" class="glyphicon glyphicon-search"></span>
                </button>
            </div>
        </form>
    </div>
</nav>

Alternate Navbar Toggle Style

In mobile screen sizes, style the navbar toggle like a navbar navigation item with navbar-toggle-page-name.

Also use this pattern when you want the search bar to be easily accessible in both mobile and desktop.

<nav class="collapse-basic-search navbar navbar-default">
    <div class="navbar-header visible-xs">
        <button class="collapsed navbar-toggle navbar-toggle-left navbar-toggle-page-name" data-target="#navbar-collapse-001" data-toggle="collapse" type="button">
            <span class="sr-only">Toggle Navigation</span>
            <span class="page-name">Message Boards</span><!-- current page name goes here e.g. Message Boards Home -->
            <span class="caret"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-collapse-left" id="navbar-collapse-001">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Message Boards</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
                <ul aria-labelledby="dropdownMenu" class="dropdown-menu">
                    <li class="dropdown-header" role="presentation">Dropdown Header</li>
                    <li role="presentation"><a href="#">Actions</a></li>
                    <li role="presentation"><a href="#">Edit</a></li>
                    <li role="presentation"><a href="#">View</a></li>
                    <li role="presentation"><a href="#">Permissions</a></li>
                    <li class="disabled" role="presentation"><a href="#" role="menuitem">Disabled</a></li>
                    <li class="divider" role="presentation"></li>
                    <li role="presentation"><a href="#" role="menuitem">Scope</a></li>
                </ul>
            </li>

            <li><a href="#">Link</a></li>
            <li class="disabled"><a href="#">Disabled</a></li>
        </ul>
    </div>

    <div class="navbar-header navbar-header-right">
        <form action="../navbar" class="basic-search input-group" method="GET">
            <div class="input-group-input">
                <div class="basic-search-slider">
                    <button class="basic-search-close btn btn-default" type="button"><span aria-hidden="true" class="icon-remove"></span></button>
                    <input class="form-control" name="search" placeholder=" Search..." type="text" />
                </div>
            </div>
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit"><span aria-hidden="true" class="icon-search"></span></button>
            </div>
        </form>
    </div>
</nav>

Use the navbar-no-collapse component to preserve desktop navbar styles in mobile. It's useful when there are only one or two links in the navbar; where collapsing doesn't make sense.

<nav class="collapse-basic-search navbar navbar-default navbar-no-collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Message Boards</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Blogs <span class="caret"></span></a>
            <ul aria-labelledby="dropdownMenu" class="dropdown-menu">
                <li class="dropdown-header" role="presentation">Dropdown Header</li>
                <li role="presentation"><a href="#">Actions</a></li>
                <li role="presentation"><a href="#">Edit</a></li>
                <li role="presentation"><a href="#">View</a></li>
                <li role="presentation"><a href="#">Permissions</a></li>
                <li class="disabled" role="presentation"><a href="#" role="menuitem">Disabled</a></li>
                <li class="divider" role="presentation"></li>
                <li role="presentation"><a href="#" role="menuitem">Scope</a></li>
            </ul>
        </li>
    </ul>

    <form class="basic-search input-group">
        <div class="input-group-input">
            <div class="basic-search-slider">
                <button class="basic-search-close btn btn-default" type="button"><span aria-hidden="true" class="icon-remove"></span></button>
                <input class="form-control" placeholder=" Search..." type="text" />
            </div>
        </div>
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><span aria-hidden="true" class="icon-search"></span></button>
        </div>
    </form>
</nav>

navbar-toggle is the button that opens and closes the navbar in mobile, must be used with the collapse plugin.

Navbar Toggle Page Name

navbar-toggle-page-name styles the navbar-toggle like a navbar link.

navbar-toggle-left is a helper class that sets float: left on navbar-toggle. The default is float: right.

navbar-header is an element that resides inside navbar. Its primary use is to display headings and controls in mobile view, but can also display items in desktop view if needed.

navbar-header-left-xs is a helper class that sets float: left on navbar-header in mobile view (screen < 768px).

navbar-header-right-xs is a helper class that sets float: right on navbar-header in mobile view (screen < 768px).

navbar-header-right is a helper class that sets float: right on navbar-header in desktop view (screen >= 768px).

navbar-collapse is the container for all content that should be collapsed into a collapsible menu in mobile.

Add navbar-collapse-absolute to navbar to turn navbar-collapse from a relative positioned menu into an absolutely positioned collapsible menu.

navbar-collapse-left is a helper class that sets float: right on navbar-collapse in desktop (>= 768px).