Side navigation | FEC Pattern Library

A hierarchical vertical navigation on the left side of a page that helps users navigate between pages within a section of the website. Top-level links navigate to new pages, and initiate a new page load. Second-level links navigate to sections within that page.

When to use

When users are deciding between grouped pages of content within one section of the website
To display a navigational hierarchy with one to two levels. If three levels are needed, the styles for the third level will need to be designed in the future.
To display the “sub-navigation” within a section of the website

When to consider something else

If you are considering multiple pages, but the content within each page is very short, consider using one medium-longer length page and using an inpage navigation component instead

Guidance from the U.S. Web Design System

Indicate where a user is within the navigational hierarchy. Use the “active” state to show users which page they have navigated to.

Keep the navigation links short. They can be shorter derivatives of page titles themselves.

If the navigation hierarchy is too long, users may miss items at the bottom. If it’s too deep, users may miss items that require too many clicks. Usability test to find the right balance between breadth and depth.

<div class="main"> <div class="container"> <nav class="sidebar side-nav-alt"> <ul class="tablist" role="tablist" data-name="tab"> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="summary" tabindex="0" aria-controls="panel1" href="#section-1">Financial Summary</a> <ul> <li><a href="#total-raised">Total raised</a></li> <li><a href="#total-spent">Total spent</a></li> <li><a href="#cash-summary">Cash summary</a></li> </ul> </li> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="about-committee" tabindex="0" aria-controls="panel2" href="#section-2">About this committee</a> </li> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="raising" tabindex="0" aria-controls="panel3" href="#section-3">Raising</a> <ul> <li><a href="#total-receipts">Total receipts</a></li> <li><a href="#individual-contribution-transactions">Individual contribution transactions</a></li> </ul> </li> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="spending" tabindex="0" aria-controls="panel4" href="#section-4" aria-selected="true">Spending</a> <ul> <li><a href="#total-disbursements">Total disbursements</a></li> <li><a href="#disbursement-transactions">Disbursement transactions</a></li> </ul> </li> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="filings" tabindex="0" aria-controls="panel5" href="#section-5">Filings</a> <ul> <li><a href="#raw-filings">Raw electronic filings</a></li> <li><a href="#reports">Regularly filed reports</a></li> <li><a href="#notices">24- and 48-hour reports</a></li> <li><a href="#statements">Statements of organization</a></li> <li><a href="#other">Other documents</a></li> </ul> </li> </ul> </nav> </div> </div>

<div class="main"> <div class="container"> <nav class="sidebar side-nav-alt"> <ul class="tablist" role="tablist" data-name="tab"> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="summary" tabindex="0" aria-controls="panel1" href="#section-1">Financial Summary</a> <ul> <li><a href="#total-raised">Total raised</a></li> <li><a href="#total-spent">Total spent</a></li> <li><a href="#cash-summary">Cash summary</a></li> </ul> </li> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="about-committee" tabindex="0" aria-controls="panel2" href="#section-2">About this committee</a> </li> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="raising" tabindex="0" aria-controls="panel3" href="#section-3">Raising</a> <ul> <li><a href="#total-receipts">Total receipts</a></li> <li><a href="#individual-contribution-transactions">Individual contribution transactions</a></li> </ul> </li> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="spending" tabindex="0" aria-controls="panel4" href="#section-4"aria-selected="true">Spending</a> <ul> <li><a href="#total-disbursements">Total disbursements</a></li> <li><a href="#disbursement-transactions">Disbursement transactions</a></li> </ul> </li> <li class="side-nav__item" role="presentation"> <a class="side-nav__link" role="tab" data-name="filings" tabindex="0" aria-controls="panel5" href="#section-5">Filings</a> <ul> <li><a href="#raw-filings">Raw electronic filings</a></li> <li><a href="#reports">Regularly filed reports</a></li> <li><a href="#notices">24- and 48-hour reports</a></li> <li><a href="#statements">Statements of organization</a></li> <li><a href="#other">Other documents</a></li> </ul> </li> </ul> </nav> </div> </div>