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 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

!ESM supported

``shell
$ npm i @aurodesignsystem/auro-sidenav
`





$3


Defining the dependency within each project that is using the component.




`js
import "@aurodesignsystem/auro-sidenav";
`





$3


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.

`html

`





Basic Example




`html

Pet travel policies
Pet travel overview
Pets in cabin
Pets in baggage compartment
Traveling to Hawaii
International travel with pets

FAQ
Is it safe to fly with my pet?
Why are certain breeds prohibited from flying in the cargo compartment?
Dogs
Cats


`




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:




`js
// 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 and that behaves exactly like and , allowing both to coexist on the same page without interfering with each other.





See code



`html

Alaska Airlines History
Historical overview
History by decade
Alaska Airlines pioneers

``