auro-sidenav HTML custom element
npm install @aurodesignsystem-dev/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.
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



!ESM supported
``shell`
$ npm i @aurodesignsystem/auro-sidenav
Defining the dependency within each project that is using the component.
`js`
import "@aurodesignsystem/auro-sidenav";
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`
`html`
Pet travel policies
FAQ
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.`
Alaska Airlines History
See code
html``
Alaska Airlines History