SidebarLayout

A rail of links beside the page.

Overview

A section with several sub-pages, such as settings, where the rail is the way between them.

Sections

Do

Profile

Your name and email.

Account

Naledi Mokoena, [email protected]

import { Body, Card, NavTabs, PageHeader, SidebarLayout } from "@hackcove/ui";

<SidebarLayout
  rail={
    <NavTabs
      orientation="vertical"
      label="Settings"
      items={[
        { label: "Profile", href: "#profile", active: true },
        { label: "Billing", href: "#billing" },
        { label: "Team", href: "#team" },
      ]}
    />
  }
>
  <PageHeader title="Profile" subtitle="Your name and email." />
  <Card title="Account">
    <Body as="p">Naledi Mokoena, [email protected]</Body>
  </Card>
</SidebarLayout>
A vertical NavTabs is the rail: a short list of sections beside the page.
Don't

Profile

Your name and email.

Account

Naledi Mokoena, [email protected]

import { Body, Card, NavTabs, PageHeader, SidebarLayout } from "@hackcove/ui";

<SidebarLayout
  rail={
    <NavTabs
      label="Settings"
      items={[
        { label: "Profile", href: "#profile", active: true },
        { label: "Billing", href: "#billing" },
        { label: "Team", href: "#team" },
      ]}
    />
  }
>
  <PageHeader title="Profile" subtitle="Your name and email." />
  <Card title="Account">
    <Body as="p">Naledi Mokoena, [email protected]</Body>
  </Card>
</SidebarLayout>
The default, horizontal NavTabs wraps into a ragged block in the rail. Give the rail orientation="vertical".

Full page

Hack Cove

Hack Cove

3 projects

Projects

Storybook, Dashboard, Site.

import {
  AppShell,
  Body,
  Button,
  Card,
  NavTabs,
  PageHeader,
  SidebarLayout,
} from "@hackcove/ui";

<AppShell
  brand={<a href="#">Hack Cove</a>}
  nav={
    <NavTabs
      label="Main"
      items={[
        { label: "Quotes", href: "#quotes", active: true },
        { label: "Clients", href: "#clients" },
      ]}
    />
  }
>
  <SidebarLayout
    rail={
      <NavTabs
        orientation="vertical"
        label="Organisations"
        items={[
          { label: "Hack Cove", href: "#hack-cove", active: true },
          { label: "Acme", href: "#acme" },
          { label: "Northwind", href: "#northwind" },
        ]}
      />
    }
  >
    <PageHeader
      title="Hack Cove"
      subtitle="3 projects"
      actions={<Button>New project</Button>}
    />
    <Card title="Projects">
      <Body as="p">Storybook, Dashboard, Site.</Body>
    </Card>
  </SidebarLayout>
</AppShell>
A whole page with a rail: the shell with its brand and nav, then the layout with a vertical NavTabs in rail and the page in children.

Usage

  • The rail is a NavTabs with orientation="vertical", one link per section and the current one active.
  • The children are the section's page: its PageHeader, then the content.
  • From md the rail is a fixed width beside the page; below it, the rail stacks above the page.
  • The rail has no background or border: it is a list of links on the page.
  • A long rail sets railLabel: below md it folds behind a closed disclosure of that name, so the page comes first on a phone; from md it is the same rail. A short rail leaves it out.
  • Facts about one record go in DetailLayout's aside, not a rail.

Accessibility

  • The rail is an <aside> holding the NavTabs, which is a <nav> named by its label.
  • The current link has aria-current="page".
  • In the DOM the rail comes first, so it is first in the tab order; folded, the summary is that first stop and the links are skipped until it is opened.
  • With railLabel the rail is a native <details> disclosure: its <summary> is the toggle, on the keyboard like any button.

API

SidebarLayout

A rail of links beside the children canvas, in the Container the shell already gives every page (a plain <AppShell>, no bleed): the rail starts at the header logo's x and the canvas ends at the header's right edge. The rail has no background and no border, so it is a list of links on the page; a NavTabs orientation="vertical" is its content. From md it is w-56 with the canvas filling the rest; below md it stacks above the canvas. A long rail sets railLabel: below md it then folds behind a disclosure of that name, closed, so the page comes first on a phone, and from md it is the same rail. Upgrading from 0.2: the rail no longer has a fill, a border or a fixed height, and it no longer sits beside the canvas on a phone.

rail required
Type
ReactNode
railLabel

Folds the rail behind a disclosure with this name below md (a long rail). Left out, the rail is always open.

Type
string