# auro-sidenav The `auro-sidenav` element 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. ### Properties & Attributes | Properties | Attributes | Modifiers | Type | Default | Description | | ---------- | ---------- | --------- | ------- | ------- | ------------------------------------------------------------------------------ | | static | static | | boolean | | When applied, the sidenav will expand to an open state and can't be collapsed. | ### Methods | Name | Parameters | Return | Description | | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- | | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. | ### Slots | Name | Description | | --------- | --------------------------------------------------------------------------------------------------- | | (default) | Default slot of the sidenav. Please construct using `auro-sidenavitems` and `auro-sidenavsections`. | | ariaLabel | Defines what to use as the `aria-label` of the sidenav. | | heading | Defines what to use as the header of the sidenav. | # auro-sidenavitem The `auro-sidenavitem` element can be used to create a link within the `auro-sidenav`. ### Properties & Attributes | Properties | Attributes | Modifiers | Type | Default | Description | | ---------- | ---------- | --------- | ------ | ------- | ------------------------------------------ | | href | href | | string | | Defines the URL of the linked page. | | target | target | | string | | Defines where to open the linked document. | ### Methods | Name | Parameters | Return | Description | | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- | | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. | ### CSS Shadow Parts | Name | Description | | ---------- | ---------------------------------------------------------------------------- | | link | Allows styling to be applied to the `a` element. | | targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink. | # auro-sidenavsection The `auro-sidenavsection` element can be used to create an accordion of `auro-sidenavitems` within the `auro-sidenav`. ### Methods | Name | Parameters | Return | Description | | -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- | | register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. | | toggle | None | | Toggles the visibility of the accordion content. | ### Events | Name | Description | | -------------- | -------------------------------------------------------- | | toggleExpanded | Notifies that the accordion has been expanded or closed. | ### Slots | Name | Description | | --------- | ------------------------------------------- | | (default) | Default slot for the accordion content. | | trigger | Defines the content of the trigger element. | ### CSS Shadow Parts | Name | Description | | --------- | ----------------------------------- | | accordion | Apply CSS to Accordion wrapper. | | chevron | Apply CSS to chevron icon. | | content | Apply CSS to the accordion content. | | trigger | Apply CSS to trigger element. | ## Sidenav Item The `` element is an [extension](https://lit.dev/docs/components/defining/) of `` element. All of the [auro-hyperlink API](https://auro.alaskaair.com/components/auro/hyperlink/api) are therefore exposed through the `auro-sidenavitem`.
Airlines Alaska Airlines American Airlines British Airways Japan Airlines
See code ```html Airlines Alaska Airlines American Airlines British Airways Japan Airlines ``` ## Sidenav Section The `` element uses `` elements to create sections and layers in the navigation. The `` element is an extension of the `` element, you will need to supply a `trigger` slot for its children as well as the `` elements. The `` element will automatically apply the `chevron` and `fluid` attributes to the `` elements. The `` elements will automatically be styled as tiered children in the `` element. Please [refer to the auro-accordion documentation](https://auro.alaskaair.com/components/auro/accordion/api) if you wish to use any of its additional attributes or functionality.
Helpful links Reservations Is it safe to fly with my pet? Why are certain breeds prohibited from flying in the cargo compartment? Hotels, cars, and rides Hotel reservations Car reservations Animals Booking pet travel Pet travel FAQ
See code ```html Helpful links Reservations Is it safe to fly with my pet? Why are certain breeds prohibited from flying in the cargo compartment? Hotels, cars, and rides Hotel reservations Car reservations Animals Booking pet travel Pet travel FAQ ``` ## Property & Attribute Examples ### Selected The `` element supports using the `selected` attribute on `` element to designate an item as active.
Favorite In-Flight Meal Signature Fruit & Cheese Platter The Jetsetter's Jam Sandwich Northwest Deli Picnic Pack Mediterranean Tapas Picnic Pack Kid's Choice Picnic Pack
See code ```html Favorite In-Flight Meal Signature Fruit & Cheese Platter The Jetsetter's Jam Sandwich Northwest Deli Picnic Pack Mediterranean Tapas Picnic Pack Kid's Choice Picnic Pack ``` ### Static The `` element uses the attribute `static` to toggle on/off accordion functionality with the navigation header. This can be both static and dynamic. Look at the "Set Up" section on the component landing page for more information on dynamic usage.
Collapsible side navigation (click to toggle) Pet travel overview Pets in cabin Pets in baggage compartment Traveling to Hawaii International travel with pets
See code ```html Collapsible side navigation (click to toggle) Pet travel overview Pets in cabin Pets in baggage compartment Traveling to Hawaii International travel with pets ``` ## Slot Examples ### Aria Label The `ariaLabel` slot defines what to use as the aria-label of the sidenav. **Note:** Do not use the `aria-label` attribute on the `auro-sidenav` element itself. This will be ignored in favor of the `ariaLabel` slot.
History of Alaska Airlines Historical overview History by decade Alaska Airlines pioneers
See code ```html History of Alaska Airlines Historical overview History by decade Alaska Airlines pioneers ``` ### Heading The `heading` slot defines what to use as the header of the sidenav.
History of Alaska Airlines Historical overview History by decade Alaska Airlines pioneers
See code ```html History of Alaska Airlines Historical overview History by decade Alaska Airlines pioneers ``` ## CSS Shadow Part Examples ## Common Usage Patterns & Functional Examples ### Responsive The following example is a responsive sidenav that will trigger the `static` attribute on window resize.
Responsive Sidenav Historical overview History by decade Alaska Airlines pioneers
See code ```html Responsive Sidenav Historical overview History by decade Alaska Airlines pioneers ``` ## Restyle Component with CSS Variables The component may be restyled by changing the values of the following token(s). ```scss @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v; :host { --ds-auro-sidenav-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default}); --ds-auro-sidenavitem-border-bottom-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider}); --ds-auro-sidenavitem-border-left-color: var(--ds-advanced-color-state-selected, #{v.$ds-advanced-color-state-selected}); --ds-auro-sidenavitem-icon-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted}); --ds-auro-sidenavsection-border-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider}); --ds-auro-sidenavsection-icon-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});; --ds-auro-sidenavsection-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default}); --ds-auro-sidenavsection-trigger-background-hover-color: var(--ds-advanced-color-state-background-hover, #{v.$ds-advanced-color-state-background-hover}); --ds-auro-sidenavsection-trigger-border-color: transparent; } ```