Side navigation
<gcds-side-nav>

Also called: sidebar menu, lefthand nav, vertical navigation.

A side navigation is a vertical list of page links on the left side of the screen.

• GitHub
• Figma

Build a side navigation

Use the side navigation component to provide an interface for a person to navigate your product.

Coding and accessibility for side navigation

Place the side navigation in the page layouts

Implement the side navigation in the product layout so that it’s present on all pages.

Use the side navigation with other components

If using breadcrumbs, align the content hierarchy in both sets of links, so the components reflect a similar path through the site.

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: Following standard practice, the code builder uses English for all code elements.