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.
Common Examples
import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<SideNav>
<SideNav.Item id="item-1">Item 1</SideNav.Item>
<SideNav.Item id="item-2">Item 2</SideNav.Item>
</SideNav>
);
}
Grouping side nav items
Side nav items can be grouped in two different ways, using SideNav.Group or SideNav.Collapsible.Using SideNav.Group
Use the SideNav.Group component to group multiple links.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.<SideNav.Link pathname="/example/path">Example Path</SideNav.Link>
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 LandmarkFor more guidance on semantic page structure and navigation landmarks, see semantic markup best practices.import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return <SideNav aria-label="Main navigation">...</SideNav>;
}
SideNav Props
The SideNav component can accept any valid HTML nav element props.import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<SideNav.Link
id="link-1"
pathname="/example"
active={false}
exact={false}
>
Link Text
</SideNav.Link>
);
}
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.
import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<SideNav.Group label="Group Label">
<SideNav.Link id="link-1">Link 1</SideNav.Link>
</SideNav.Group>
); }
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.
import { SideNav } from "@servicetitan/anvil2";
function ExampleComponent() {
return (
<SideNav.Collapsible label="Collapsible Group" defaultExpanded={false}>
<SideNav.Link id="link-1">Link 1</SideNav.Link>
</SideNav.Collapsible>
);
}
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.
