Top navigation
<gcds-top-nav>

Also called: site menu, navigation, navbar.

A top navigation is a horizontal list of page links.

• GitHub
• Figma

Build a top navigation

Use a top navigation to help a person find their way around your web page or site.

Coding and accessibility for top navigation

Add the top navigation to each page

• Implement the top navigation in the website layout so that it's present on every page.
• Opt to add a nav group with a second level of navigation by placing the <gcds-nav-link> in a <gcds-nav-group>.

Use the top navigation with other components

• If using breadcrumbs, align the content hierarchy in both set of links, so both components reflect a similar path through the site.
• If you're using the header component, add the top navigation directly to the header by passing a child element with the slot="menu" attribute into the header. This will place the top nav in the header after the language toggle, signature, and search slots.

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: The code builder uses English for all code elements, which follows standard practice.