Base Side Navigation

[slowbot]

Hierarchical, vertical navigation to place at the side of a page.

When to use the card component

• To display a navigational hierarchy with one to three levels.
• To display the “sub-navigation” within a section of the website.

When to consider something else

• Small site. If the site has fewer than five pages, consider organizing the page without a navigational hierarchy.
• Existing navigation. If your page already has a horizontal and vertical navigation bar, consider ways to simplify your navigation system.

Usability guidance

• Show the current page. 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.

Accessibility

• Ensure the side navigational system is keyboard accessible. Users should be able to tab through each link.

Implementation

Field	Value	Name
Header	title for the navigation
Link: Text	label for the nav item
Link: URL	url for the nav item
Link: Current	status for the nav item
Link: Links	if the link item has sub items

Variants	Values	Name
Background	light (default), tint, primary-tint or dark. Effects: text color, background color, action color

Related USWDS Components

• Side Navigation

Theme

Element	Effects	Global/Component
$theme-sidenav-current-border-width	Border	Component
$theme-sidenav-font-family	Link	Component

Questions:

• ..

Figma:

https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=267%3A1039