# 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. ## 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 ## Additional Information 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. ## Setup The `auro-sidenav` component is configured to remain in "mobile" (read: accordion dropdown) form until passed the `static` attribute. See the code example below for a vanilla JavaScript solution to add and remove this attribute automatically when resizing the browser window. To see this code in action, resize the window for the **Responsive** example farther down the page. _This code example is a wrapper around the native `window.matchMedia`. Though Sidenav functions in SSR, this specific function has a dependency on the browser environment._ ```javascript // This design token variable can be whatever/from wherever you want const DESIGN_TOKEN_VARIABLE = '--ds-grid-breakpoint-md'; const breakpointPx = getComputedStyle(document.documentElement).getPropertyValue(DESIGN_TOKEN_VARIABLE) const mediaQueryString = `(min-width: ${breakpointPx})` const windowMediaMatcher = window.matchMedia(mediaQueryString); const toggleSidenavCollapse = (e) => { // ! CHANGE THIS ID TO TARGET YOUR DESIRED ELEMENT! const auroSidenavExample = document.getElementById("collapsible-example") // onload does not include a match, manually specify it if (e.matches === undefined) { e.matches = window.innerWidth >= Number(breakpointPx.replace("px", "")) } if (e.matches) { auroSidenavExample?.setAttribute('static', '') } else { auroSidenavExample?.removeAttribute('static') } }; windowMediaMatcher.onchange = toggleSidenavCollapse; window.onload = toggleSidenavCollapse; ``` **NOTE:** When using the above code outside of React or other frameworks, please place your script tag somewhere below the sidenav in your HTML. ```html ... ``` You may also leverage things like `useMediaQuery` from React MUI, or similar media query functions. ```javascript import * as React from 'react'; import useMediaQuery from '@mui/material/useMediaQuery'; export default function ResponsiveSidenav() { const DESIGN_TOKEN_VARIABLE = '--ds-grid-breakpoint-md'; const breakpointPx = getComputedStyle(document.documentElement).getPropertyValue(DESIGN_TOKEN_VARIABLE) const isMediumScreen = useMediaQuery(`(min-width: ${breakpointPx})`); return {`(min-width: ${breakpointPx}) matches: ${matches}`}; } ``` ## Example(s) ### Basic The following example illustrates a common use case for the sidenav element that includes a navigation header, an accordion sub-nav action, as well as a link that will open to an external URL.

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

See code ```html Pet travel policies