# Sidenav `` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) 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 [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-sidenav/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-sidenav/actions/workflows/release.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-sidenav?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-sidenav) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-sidenav?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) ```shell $ npm i @aurodesignsystem/auro-sidenav ``` ### Define Dependency in Project Defining the dependency within each project that is using the `` component. ```js 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. ```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.
Alaska Airlines History Historical overview History by decade Alaska Airlines pioneers
See code ```html Alaska Airlines History Historical overview History by decade Alaska Airlines pioneers ```