Side Nav components are used traditionally as a secondary form of navigation where the primary navigation is located hierarchically above the page frame.

const Example = () => {
    const [active, setActive] = React.useState(0)
    return (
        <SideNav title="Marketing">
            <SideNav.Item onClick={() => setActive(0)} active={active===0}>Dashboard</SideNav.Item>
            <SideNav.Item onClick={() => setActive(1)} active={active===1}>Campaigns</SideNav.Item>
            <SideNav.Item onClick={() => setActive(2)} active={active===2}>Emails</SideNav.Item>
            <SideNav.Item onClick={() => setActive(3)} active={active===3}>Audiences</SideNav.Item>
        </SideNav>
    )
}
render (Example)

Individual items in the Side Nav can be links. This is useful when linking to external sites or preserving the right click context menu built into browsers.

const Example = () => {
    return (
        <SideNav>
            <SideNav.Item href="https://www.servicetitan.com/" active>ServiceTitan</SideNav.Item>
            <SideNav.Item href="https://dribbble.com/servicetitan">Dribbble</SideNav.Item>
            <SideNav.Item href="https://github.com/servicetitan/anvil">Github</SideNav.Item>
            <SideNav.Item href="https://medium.com/servicetitan-design">Medium</SideNav.Item>
        </SideNav>
    )
}
render (Example)

Groups

span: 6
---
const GroupsExample = () => {
    const [active, setActive] = React.useState(0)
    return (
        <SideNav title="Marketing">
            <SideNav.Item onClick={() => setActive(0)} active={active===0}>Dashboard</SideNav.Item>
            <SideNav.Item onClick={() => setActive(1)} active={active===1}>Campaigns</SideNav.Item>
            <SideNav.Item onClick={() => setActive(2)} active={active===2}>Emails</SideNav.Item>
            <SideNav.Item onClick={() => setActive(3)} active={active===3}>Audiences</SideNav.Item>

            <SideNav.Group title="Integrations">
                <SideNav.Item onClick={() => setActive(4)} active={active===4}>Catalog</SideNav.Item>
                <SideNav.Item onClick={() => setActive(5)} active={active===5}>Updates</SideNav.Item>
                <SideNav.Item onClick={() => setActive(6)} active={active===6}>Sync Log</SideNav.Item>
            </SideNav.Group>
        </SideNav>
    )
}
render (GroupsExample)
span: 6
---
const GroupsExample2 = () => {
    const [active, setActive] = React.useState(0)
    return (
        <SideNav title={<span>Marketing<Tag color="warning" subtle compact>Pro</Tag></span>}>
    <SideNav.Group title="Email">
        <SideNav.Item onClick={() => setActive(0)} active={active===0}>Dashboard</SideNav.Item>
        <SideNav.Item onClick={() => setActive(1)} active={active===1}>Campaigns</SideNav.Item>
        <SideNav.Item onClick={() => setActive(2)} active={active===2}>Email Templates</SideNav.Item>
        <SideNav.Item onClick={() => setActive(3)} active={active===3}>Audiences</SideNav.Item>
    </SideNav.Group>

    <SideNav.Group title="Direct Mail">
        <SideNav.Item onClick={() => setActive(4)} active={active===4}>Dashboard</SideNav.Item>
        <SideNav.Item onClick={() => setActive(5)} active={active===5}>Campaigns</SideNav.Item>
        <SideNav.Item onClick={() => setActive(6)} active={active===6}>Postcard Templates</SideNav.Item>
        <SideNav.Item onClick={() => setActive(7)} active={active===7}>Audiences</SideNav.Item>
    </SideNav.Group>

    <SideNav.Group title="Reputation">
        <SideNav.Item onClick={() => setActive(8)} active={active===8}>Reputation<Tag color="info" compact subtle>Beta</Tag></SideNav.Item>
    </SideNav.Group>
</SideNav>
    )
}
render (GroupsExample2)

Best Practices

The Side Nav component should:

  • Group navigation items into sections based on related categories.
  • Always have one, and only one, item active at all time.
  • Contain more than one navigational item and all must include a page change on click
  • Direct the user to a page that has a unique URL
  • Most commonly should be contained within a Sidebar.

Related Components

  • For a third level of navigation, use a Tab.

Importing

import { SideNav } from '@servicetitan/design-system';