Side Nav – Code

Implementation
SideNav Props
SideNav.Link Props
SideNav.Group Props
SideNav.Collapsible Props

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

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:

string

required

Unique identifier for the navigation link. Required to enable keyboard navigation.

active

boolean

When true, marks the link as the current active page.

disabled

boolean

When true, disables the link and prevents interaction.

pathname

string

Pathname for client-side routing. Using this will trigger History API navigation.

string

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:

label

string

required

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:

label

string

required

The label text displayed for the collapsible section.

defaultExpanded

boolean

default:"false"

Initial expansion state for uncontrolled usage.

expanded

boolean

Controlled expansion state.

​Common Examples

​Grouping side nav items

​Using SideNav.Group

​Using SideNav.Collapsible

​Routing with Side Nav Links

​React Accessibility

​Multiple Navigation Landmark

​SideNav Props

​SideNav.Link Props

​SideNav.Group Props

​SideNav.Collapsible Props

Common Examples

Grouping side nav items

Using SideNav.Group

Using SideNav.Collapsible

Routing with Side Nav Links

React Accessibility

Multiple Navigation Landmark

`SideNav` Props

`SideNav.Link` Props

`SideNav.Group` Props

`SideNav.Collapsible` Props