Skip to Main Content
Warning!

This browser is not supported by the Playbook.

You should switch to a supported browser. Learn more

Toolkit
Toolkit

Navigation

Navigation allows a user to move throughout a website. These are the navigation components used in the Demos. Click on the brackets icon to the right to reveal the code that creates each navigation element and to see how it renders across different devices.

Primary Navigation

Primary navigation allows a user to select a main section of the website to browse.

<ul class="lsc-primary-navigation">
    <li class="lsc-navigation-item lsc-mobile-nav lsc-mobile-nav-header">
        <button class="lsc-navigation-button lsc-button-tertiary lsc-button-icon lsc-icon-x-before" data-lsc-navigation-toggle>
            Close Navigation Menu
        </button>
    </li>
    <li class="lsc-navigation-item">
        <a href="#" class="lsc-navigation-link">Home</a>
    </li>
    <li class="lsc-navigation-item">
        <a href="#" class="lsc-navigation-link">Topic Library</a>
    </li>
    <li class="lsc-navigation-item">
        <a href="#" class="lsc-navigation-link">Form Library</a>
    </li>
    <li class="lsc-navigation-item lsc-navigation-current">
        <a href="#" class="lsc-navigation-link lsc-navigation-current">Find a Lawyer</a>
    </li>
    <li class="lsc-navigation-item lsc-mobile-nav">
        <a href="#" class="lsc-navigation-link lsc-button-icon lsc-icon-language-before">Select your Language</a>
    </li>
    <li class="lsc-navigation-item lsc-mobile-nav">
        <a href="#" class="lsc-navigation-link lsc-button-icon lsc-icon-location-before">Set Your Location</a>
    </li>
    <li class="lsc-navigation-item lsc-mobile-nav">
        <a href="#" class="lsc-navigation-link lsc-button-icon lsc-icon-search-before">Search the Site</a>
    </li>
</ul>

Utility Navigation

Utility navigation allows a user to find the search utility or to set preferences, such as location or language.

<ul class="lsc-utility-navigation">
    <li class="lsc-navigation-item">
        <a href="#" class="lsc-navigation-link lsc-button-tertiary lsc-button-icon lsc-icon-language-before"  title="Select Your Language">
            <span class="lsc-accessible-text">Select your Language</span>
        </a>
    </li>
    <li class="lsc-navigation-item">
        <a href="#" class="lsc-navigation-link lsc-button-tertiary lsc-button-icon lsc-icon-location-before"  title="Set Your Location">
            <span class="lsc-accessible-text">Set Your Location</span>
        </a>
    </li>
    <li class="lsc-navigation-item">
        <a href="#" class="lsc-navigation-link lsc-button-tertiary lsc-button-icon lsc-icon-search-before"  title="Search the Site">
            <span class="lsc-accessible-text">Search the Site</span>
        </a>
    </li>
</ul>

Breadcrumbs show a user where they are within a content-rich website.

<div class="lsc-breadcrumbs-wrapper">
    <ul class="lsc-breadcrumbs-list">
        <li class="lsc-breadcrumb">
            <a href="#" class="lsc-breadcrumb-link">Home</a>
        </li>
        <li class="lsc-breadcrumb">
            <span class="lsc-breadcrumb-current">Find a Lawyer</span>
        </li>
    </ul>
</div>