> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Side Nav – Code
> Side Navs are used to display a list of links to move between pages.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
;
}
};
```tsx lines expandable theme={null}
import { SideNav } from "@servicetitan/anvil2";
function App() {
return (
HomeDashboardAllCustomGlobal Settings
User Preferences
);
}
export default App;
```
## Common Examples
```tsx theme={null}
import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
Item 1Item 2
);
}
```
### Grouping side nav items
Side nav items can be grouped in two different ways, using `SideNav.Group` or `SideNav.Collapsible`.
```tsx lines expandable theme={null}
import { SideNav, type SideNavLinkProps } from "@servicetitan/anvil2";
import { useState, type MouseEvent } from "react";
function App() {
const [active, setActive] = useState("2");
const handleOnClick = (
_e: MouseEvent,
id: SideNavLinkProps["id"],
) => {
setActive(id);
};
return (
Side Nav Item 1
Side Nav Item 2
Side Nav Item 3
Side Nav Item 4
Side Nav Item 5
Side Nav Item 6
);
}
export default App;
```
#### Using SideNav.Group
Use the `SideNav.Group` component to group multiple links.
```tsx lines expandable theme={null}
import { SideNav, type SideNavLinkProps } from "@servicetitan/anvil2";
import { useState, type MouseEvent } from "react";
function App() {
const [active, setActive] = useState("2");
const handleOnClick = (
_e: MouseEvent,
id: SideNavLinkProps["id"],
) => {
setActive(id);
};
return (
Child Item 1
Child Item 2
Child Item 3
Child Item 1
Child Item 2
Child Item 3
Child Item 1
Child Item 2
Child Item 3
);
}
export default App;
```
#### Using SideNav.Collapsible
To make groups of items collapsible, use the `SideNav.Collapsible` component.
### Routing with Side Nav Links
As of version `1.16.9`, the `pathname` prop of the `SideNav.Link` component enables native browser routing using the `history.pushState()` function. This is essentially what `react-router-dom` does, and this method prevents extra dependencies in the `@servicetitan/anvil2` package.
```tsx theme={null}
Example Path
```
## React Accessibility
### Multiple Navigation Landmark
When there is more than one navigation landmark on a page, each should have a unique label. For example, if a `SideNav` exists on the same page as another navigational element, such as an app bar using a `nav` element, they should both have unique labels.
Reference: [W3 Navigation Landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html)
```tsx lines expandable theme={null}
import { SideNav, Flex, Text } from "@servicetitan/anvil2";
function App() {
return (
First Navigation Landmark
Item 1-1Item 1-2
Second Navigation Landmark
Item 2-1Item 2-2
);
}
export default App;
```
For more guidance on semantic page structure and navigation landmarks, see [semantic markup best practices](/docs/accessibility/semantic-markup#sections-articles-and-asides).
```tsx theme={null}
import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return ...;
}
```
## `SideNav` Props
The `SideNav` component can accept any valid HTML `nav` element props.
```tsx theme={null}
import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
Link Text
);
}
```
## `SideNav.Link` Props
The `SideNav.Link` component can accept any valid HTML `a` props, as well as the following:
Unique identifier for the navigation link. Required to enable keyboard navigation.
When true, marks the link as the current active page.
When true, disables the link and prevents interaction.
Pathname for client-side routing. Using this will trigger History API navigation.
Optional search parameters for the URL. Can only be used if `pathname` has a value.
```tsx theme={null}
import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
Link 1
); }
```
## `SideNav.Group` Props
The `SideNav.Group` component can accept any valid HTML `li` props, as well as the following:
The label text displayed for the navigation group.
```tsx theme={null}
import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
Link 1
);
}
```
## `SideNav.Collapsible` Props
The `SideNav.Collapsible` component can accept any valid HTML `li` props, as well as the following:
The label text displayed for the collapsible section.
Initial expansion state for uncontrolled usage.
Controlled expansion state.
