Sidenav

<auro-sidenav> is a HTML custom element that provides users a way to create navigational interfaces on the left-hand side of a page to navigate to separate pages or different sections within the same page.

When consuming the auro-sidenav you will be registering the auro-sidenavitem and auro-sidenavsection component as well as the auro-sidenav components to the DOM. These components will be necessary to create the navigation.

The auro-sidenavsection is an extension of the auro-accordion can be used to create sections.

The auro-sidenavitem is an extension of the auro-hyperlink and used to create the navigational links in the auro-sidenav. You can use the expected href and target attributes to properly enable and style the links.

Please refer to the below example to see how to use these components.

Use Cases

The <auro-sidenav> element should be used in situations where users may:

• create in-page navigation for long content-heavy pages
• provide navigation to related pages on a page

Install

$ npm i @aurodesignsystem/auro-sidenav

Define Dependency in Project

Defining the dependency within each project that is using the <auro-sidenav> component.

import "@aurodesignsystem/auro-sidenav";

Use CDN

In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.

<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-sidenav@latest/+esm"></script>

Basic Example

<auro-sidenav static>
  <span slot="heading">Pet travel policies</span>
  <auro-sidenavitem href="/content/travel-info/pets">Pet travel overview</auro-sidenavitem>
  <auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-cabin">Pets in cabin</auro-sidenavitem>
  <auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-baggage-compartment">Pets in baggage compartment</auro-sidenavitem>
  <auro-sidenavitem href="/content/travel-info/policies/pets-traveling-hawaii">Traveling to Hawaii</auro-sidenavitem>
  <auro-sidenavitem href="/content/travel-info/policies/pets-traveling-international" target="_blank">International travel with pets</auro-sidenavitem>
  <auro-sidenavsection>
    <span slot="trigger">FAQ</span>
    <auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa#safe-to-fly">Is it safe to fly with my pet?</auro-sidenavitem>
    <auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa#certain-breeds-prohibited">Why are certain breeds prohibited from flying in the cargo compartment?</auro-sidenavitem>
    <auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa#dog-info" target="_blank">Dogs</auro-sidenavitem>
    <auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa#cat-info" target="_blank">Cats</auro-sidenavitem>
  </auro-sidenavsection>
</auro-sidenav>

Custom Component Registration for Version Management

There are two key parts to every Auro component: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.

When you install the component as described on the Install page, the class is imported automatically, and the component is registered globally for you.

However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.

You can do this by importing only the component class and using the register(name) method with a unique name:

// Import the class only
import { AuroSideNav, AuroSideNavItem } from '@aurodesignsystem/auro-sidenav/class';

// Register with a custom name if desired
AuroSideNav.register('custom-sidenav');
AuroSideNavItem.register('custom-sidenavitem');

This will create a new custom element <custom-sidenav> and <custom-sidenavitem> that behaves exactly like <auro-sidenav> and <auro-sidenavitem>, allowing both to coexist on the same page without interfering with each other.

<custom-sidenav static>
  <span slot="heading">Alaska Airlines History</span>
  <custom-sidenavitem href="/content/about-us/history">Historical overview</custom-sidenavitem>
  <custom-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</custom-sidenavitem>
  <custom-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</custom-sidenavitem>
</custom-sidenav>