@tempoxyz/ds 0.3.10 → 0.3.13

package/dist/docs/product/components/sidebar-menu.md

@@ -0,0 +1,922 @@
+# SidebarMenu
+
+Vertical navigation for sidebars and drawers.
+
+[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/SidebarMenu.tsx)
+
+Figma: [Buttons/Floating Action Button](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5265-2305) (`SidebarMenu.Item`), [Navigation/Account Row](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-3036) (`SidebarMenu.AccountRow`), [Navigation/Nav Item](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-2694) (`SidebarMenu.Item`), [Navigation/Sidebar Promo](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5629-2524) (`SidebarMenu.Promo`), [Navigation/Tab Bar Item](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5265-2279) (`SidebarMenu.Item`), [Navigation/Wallet Sidebar](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-id=5227-2727) (`SidebarMenu.Root`)
+
+## Overview
+
+SidebarMenu renders vertical navigation of icon and label rows, for sidebars and drawers. Items are links, not menu items.
+
+## Examples
+
+### Basic
+
+```tsx
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Key, Settings, Users } from '@tempoxyz/ds/icons'
+
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Console" {...styles.column()}>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Project</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Key />
+          API Keys
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Organization</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item active href="#">
+          <Users />
+          Team
+        </SidebarMenu.Item>
+        <SidebarMenu.Item render={<button type="button" />}>
+          <Settings />
+          Settings
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SidebarMenu/Basic.tsx)
+
+### Size
+
+Set `size` on `SidebarMenu.Root` to `small`, `medium` (default), or `large`.
+
+```tsx
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Coins, CreditCard, Home, ShieldCheck, Trend } from '@tempoxyz/ds/icons'
+
+export function Demo() {
+  return (
+    <div {...styles.row()}>
+      {(['small', 'medium', 'large'] as const).map((size) => (
+        <SidebarMenu.Root aria-label={`Wallet ${size}`} key={size} size={size} {...styles.column()}>
+          <SidebarMenu.Item active href="#">
+            <Home />
+            Home
+          </SidebarMenu.Item>
+          <SidebarMenu.Item href="#">
+            <Coins />
+            Balances
+          </SidebarMenu.Item>
+          <SidebarMenu.Item href="#">
+            <Trend />
+            Activity
+          </SidebarMenu.Item>
+          <SidebarMenu.Item href="#">
+            <CreditCard />
+            Credits
+          </SidebarMenu.Item>
+          <SidebarMenu.Item href="#">
+            <ShieldCheck />
+            Authorized Apps
+          </SidebarMenu.Item>
+        </SidebarMenu.Root>
+      ))}
+    </div>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+
+  export const row = style({ display: 'flex', flexWrap: 'wrap', gap: '32' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SidebarMenu/Size.tsx)
+
+### Submenu
+
+Nest items in a `SidebarMenu.Submenu`. Set `defaultOpen` to expand it on first render.
+
+```tsx
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import {
+  Bank,
+  Bell,
+  ChartBar,
+  Document,
+  GasFee,
+  Globe,
+  Grid,
+  Key,
+  Link,
+  Lock,
+  Mail,
+  Receipt,
+  Users,
+  Wallet,
+} from '@tempoxyz/ds/icons'
+
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Dashboard" size="small" {...styles.column()}>
+      <SidebarMenu.Item active href="#">
+        <Grid />
+        Overview
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <ChartBar />
+        Analytics
+      </SidebarMenu.Item>
+      <SidebarMenu.Submenu defaultOpen>
+        <SidebarMenu.SubmenuTrigger>
+          <Receipt />
+          Transactions
+        </SidebarMenu.SubmenuTrigger>
+        <SidebarMenu.SubmenuPanel>
+          <SidebarMenu.Item href="#">Incoming</SidebarMenu.Item>
+          <SidebarMenu.Item href="#">Outgoing</SidebarMenu.Item>
+          <SidebarMenu.Item href="#">Refunds</SidebarMenu.Item>
+        </SidebarMenu.SubmenuPanel>
+      </SidebarMenu.Submenu>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Payments</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Wallet />
+          Wallets
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Bank />
+          Payouts
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <GasFee />
+          Fee payer
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Link />
+          Payment links
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Developers</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Key />
+          API keys
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Globe />
+          Webhooks
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Document />
+          Docs
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Settings</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Users />
+          Team
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Lock />
+          Security
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Bell />
+          Notifications
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Mail />
+          Emails
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SidebarMenu/Submenu.tsx)
+
+### Account Row
+
+Render a `SidebarMenu.AccountRow` in a `SidebarMenu.Account`, which draws the divider above it at the bottom of the sidebar. Pass the row to `Menu.Trigger` through `render` to open the account menu. The row ends in a chevron only while it opens a menu.
+
+```tsx
+/** Shows the account row at the bottom of a sidebar, under its divider, opening the account menu. @module */
+import { Avatar, Menu, SidebarMenu, style } from '@tempoxyz/ds'
+import { Copy, Help, LogOut, User } from '@tempoxyz/ds/icons'
+
+/** Renders the help link, then the account row as the trigger of the account menu. */
+export function Demo() {
+  return (
+    <div {...styles.column()}>
+      <SidebarMenu.Root aria-label="Support">
+        <SidebarMenu.Item href="#">
+          <Help />
+          Help
+        </SidebarMenu.Item>
+      </SidebarMenu.Root>
+      <SidebarMenu.Account>
+        <Menu.Root>
+          <Menu.Trigger
+            render={<SidebarMenu.AccountRow description="piril@tempo.xyz" label="Piril Akay" />}
+          >
+            <Avatar size="32">
+              <Avatar.Fallback>PA</Avatar.Fallback>
+            </Avatar>
+          </Menu.Trigger>
+          <Menu.Popup side="top">
+            <Menu.Item>
+              <User />
+              Account details
+            </Menu.Item>
+            <Menu.Item>
+              <Copy />
+              Copy address
+            </Menu.Item>
+            <Menu.Separator />
+            <Menu.Item intent="negative">
+              <LogOut />
+              Sign out
+            </Menu.Item>
+          </Menu.Popup>
+        </Menu.Root>
+      </SidebarMenu.Account>
+    </div>
+  )
+}
+
+namespace styles {
+  export const column = style({
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: '8',
+    width: '15rem !custom',
+  })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SidebarMenu/AccountRow.tsx)
+
+### Logo
+
+Pass a `SidebarMenu.Logo` to an account row that names a product or wallet, such as the wallet switcher at the top of the sidebar.
+
+```tsx
+/** Shows the wallet switcher at the top of a sidebar, with the Tempo mark in a logo tile. @module */
+import { Menu, SidebarMenu, style, TempoLogo } from '@tempoxyz/ds'
+import { Plus, Wallet } from '@tempoxyz/ds/icons'
+
+/** Renders the wallet row, with the logo tile as its media, as the trigger of the wallet menu. */
+export function Demo() {
+  return (
+    <div {...styles.column()}>
+      <Menu.Root>
+        <Menu.Trigger
+          render={<SidebarMenu.AccountRow description="0xc721…s9dk" label="Tempo Wallet" />}
+        >
+          <SidebarMenu.Logo>
+            <TempoLogo type="mark" />
+          </SidebarMenu.Logo>
+        </Menu.Trigger>
+        <Menu.Popup>
+          <Menu.Item>
+            <Wallet />
+            Savings
+          </Menu.Item>
+          <Menu.Separator />
+          <Menu.Item>
+            <Plus />
+            New wallet
+          </Menu.Item>
+        </Menu.Popup>
+      </Menu.Root>
+    </div>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/SidebarMenu/Logo.tsx)
+
+## Anatomy
+
+Import the component and assemble its parts.
+
+```tsx
+import { SidebarMenu } from '@tempoxyz/ds'
+
+<SidebarMenu.Root>
+  <SidebarMenu.Group>
+    <SidebarMenu.GroupLabel />
+    <SidebarMenu.Item />
+    <SidebarMenu.Submenu>
+      <SidebarMenu.SubmenuTrigger />
+      <SidebarMenu.SubmenuPanel>
+        <SidebarMenu.Item />
+      </SidebarMenu.SubmenuPanel>
+    </SidebarMenu.Submenu>
+  </SidebarMenu.Group>
+</SidebarMenu.Root>
+<SidebarMenu.AccountRow>
+  <SidebarMenu.Logo />
+</SidebarMenu.AccountRow>
+<SidebarMenu.Account>
+  <SidebarMenu.AccountRow />
+</SidebarMenu.Account>
+<SidebarMenu.Mark />
+<SidebarMenu.Promo />
+```
+
+## Guidelines
+
+### When to Use
+
+* Navigate a product with five or more destinations, such as Home, API keys, Webhooks, Team, and Settings.
+* Navigate inside `AppShell.Sidebar` ([AppShell](app-shell.md)), which moves the menu into a drawer below 1024px.
+
+### When Not to Use
+
+* Use [Menu](menu.md) for a list of actions, such as Rename key or Revoke key.
+* Use [Tabs](tabs.md) to switch views inside one page.
+* Use [Breadcrumbs](breadcrumbs.md) to show where a deeply nested page sits.
+* Use [ListGroup](list-group.md) for a settings page that lists its subpages in the content.
+
+### Group Related Destinations
+
+Wrap related items in a `SidebarMenu.Group` with a `SidebarMenu.GroupLabel`, such as Payments or Developers. Adjacent groups render with space between them.
+
+If the first group holds the main pages, such as Home, it can skip its label. Give it an `aria-label` instead.
+
+**Do:** Group items under short labels.
+
+```tsx
+/** Do example for "Group Related Destinations" on the SidebarMenu page: group items under short labels. @module */
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Bank, Globe, Grid, Key, Wallet } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Console" size="small" {...styles.column()}>
+      <SidebarMenu.Group aria-label="Project">
+        <SidebarMenu.Item active href="#">
+          <Grid />
+          Home
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Payments</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Wallet />
+          Wallets
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Bank />
+          Payouts
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Developers</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Key />
+          API keys
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Globe />
+          Webhooks
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+**Don't:** List unrelated destinations in one flat column.
+
+```tsx
+/**
+ * Don't example for "Group Related Destinations" on the SidebarMenu page.
+ * Don't list unrelated destinations in one flat column.
+ * @module
+ */
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Bank, Bell, Globe, Grid, Key, Lock, Users, Wallet } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Console" size="small" {...styles.column()}>
+      <SidebarMenu.Item active href="#">
+        <Grid />
+        Home
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <Wallet />
+        Wallets
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <Key />
+        API keys
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <Users />
+        Team
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <Bank />
+        Payouts
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <Bell />
+        Notifications
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <Globe />
+        Webhooks
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <Lock />
+        Security
+      </SidebarMenu.Item>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+### Keep Item Counts Low
+
+* **Per group:** Three to seven items, in at most four or five groups.
+* **Single items:** Avoid groups of one, except an unlabelled first group.
+* **Long menus:** If a menu has 15 or more items, set `size="small"` for 32px rows and 16px icons.
+* **Overflow:** Move rare pages onto a hub page built from [ListGroup](list-group.md), such as Settings.
+
+**Do:** Put several related items in each group.
+
+```tsx
+/**
+ * Do example for "Keep Item Counts Low" on the SidebarMenu page.
+ * Put several related items in each group.
+ * @module
+ */
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Bank, Globe, Key, Wallet } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Console" size="small" {...styles.column()}>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Payments</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Wallet />
+          Wallets
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Bank />
+          Payouts
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Developers</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Key />
+          API keys
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Globe />
+          Webhooks
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+**Don't:** Give each item a group of its own.
+
+```tsx
+/**
+ * Don't example for "Keep Item Counts Low" on the SidebarMenu page.
+ * Don't give each item a group of its own.
+ * @module
+ */
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Bank, Globe, Key, Wallet } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Console" size="small" {...styles.column()}>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Treasury</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Wallet />
+          Wallets
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Payments</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Bank />
+          Payouts
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Access</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Key />
+          API keys
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+      <SidebarMenu.Group>
+        <SidebarMenu.GroupLabel>Integrations</SidebarMenu.GroupLabel>
+        <SidebarMenu.Item href="#">
+          <Globe />
+          Webhooks
+        </SidebarMenu.Item>
+      </SidebarMenu.Group>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+### Nest One Level at Most
+
+A `SidebarMenu.Submenu` collapses related pages under a trigger. Open the submenu that holds the current page with `defaultOpen` or a controlled `open`. The trigger only expands and collapses, so give its pages their own items.
+
+**Do:** Nest one level, such as Incoming and Outgoing under Transactions, without icons.
+
+```tsx
+/**
+ * Do example for "Nest One Level at Most" on the SidebarMenu page.
+ * Nest one level, such as Incoming and Outgoing under Transactions, without icons.
+ * @module
+ */
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Grid, Receipt } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Console" size="small" {...styles.column()}>
+      <SidebarMenu.Item href="#">
+        <Grid />
+        Home
+      </SidebarMenu.Item>
+      <SidebarMenu.Submenu defaultOpen>
+        <SidebarMenu.SubmenuTrigger>
+          <Receipt />
+          Transactions
+        </SidebarMenu.SubmenuTrigger>
+        <SidebarMenu.SubmenuPanel>
+          <SidebarMenu.Item active href="#">
+            Incoming
+          </SidebarMenu.Item>
+          <SidebarMenu.Item href="#">Outgoing</SidebarMenu.Item>
+        </SidebarMenu.SubmenuPanel>
+      </SidebarMenu.Submenu>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+**Don't:** Nest a submenu inside another submenu.
+
+```tsx
+/**
+ * Don't example for "Nest One Level at Most" on the SidebarMenu page.
+ * Don't nest a submenu inside another submenu.
+ * @module
+ */
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Grid, Receipt } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Console" size="small" {...styles.column()}>
+      <SidebarMenu.Item href="#">
+        <Grid />
+        Home
+      </SidebarMenu.Item>
+      <SidebarMenu.Submenu defaultOpen>
+        <SidebarMenu.SubmenuTrigger>
+          <Receipt />
+          Transactions
+        </SidebarMenu.SubmenuTrigger>
+        <SidebarMenu.SubmenuPanel>
+          <SidebarMenu.Submenu defaultOpen>
+            <SidebarMenu.SubmenuTrigger>Incoming</SidebarMenu.SubmenuTrigger>
+            <SidebarMenu.SubmenuPanel>
+              <SidebarMenu.Item active href="#">
+                Pending
+              </SidebarMenu.Item>
+              <SidebarMenu.Item href="#">Settled</SidebarMenu.Item>
+            </SidebarMenu.SubmenuPanel>
+          </SidebarMenu.Submenu>
+          <SidebarMenu.Item href="#">Outgoing</SidebarMenu.Item>
+        </SidebarMenu.SubmenuPanel>
+      </SidebarMenu.Submenu>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+### Keep Labels on One Line
+
+Items do not wrap. Give every top-level item an icon, or none of them. Mark a link that leaves the product, such as API docs, with a trailing `ExternalLink` icon.
+
+**Do:** Shorten each label to the page's name.
+
+```tsx
+/**
+ * Do example for "Keep Labels on One Line" on the SidebarMenu page.
+ * Shorten each label to the page's name.
+ * @module
+ */
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Globe, Grid, Key } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Console" size="small" {...styles.column()}>
+      <SidebarMenu.Item href="#">
+        <Grid />
+        Home
+      </SidebarMenu.Item>
+      <SidebarMenu.Item active href="#">
+        <Key />
+        API keys
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <Globe />
+        Webhooks
+      </SidebarMenu.Item>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+**Don't:** Write labels longer than the sidebar is wide.
+
+```tsx
+/**
+ * Don't example for "Keep Labels on One Line" on the SidebarMenu page.
+ * Don't write labels longer than the sidebar is wide.
+ * @module
+ */
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { Globe, Grid, Key } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <SidebarMenu.Root aria-label="Console" size="small" {...styles.column()}>
+      <SidebarMenu.Item href="#">
+        <Grid />
+        Home
+      </SidebarMenu.Item>
+      <SidebarMenu.Item active href="#">
+        <Key />
+        Manage your API keys and secrets
+      </SidebarMenu.Item>
+      <SidebarMenu.Item href="#">
+        <Globe />
+        Webhooks
+      </SidebarMenu.Item>
+    </SidebarMenu.Root>
+  )
+}
+
+namespace styles {
+  export const column = style({ width: '15rem !custom' })
+}
+```
+
+### Put Workspace and Account Controls at the Edges
+
+In an [AppShell](app-shell.md), put the project switcher in `AppShell.SidebarHeader` and the account menu in a `SidebarMenu.Account` at the end of `AppShell.SidebarFooter`. Both open a [Menu](menu.md): trigger the account menu with a `SidebarMenu.AccountRow`, and render the switcher with `render={<button type="button" />}`.
+
+**Do:** Pin the project switcher to the top and the account to the bottom.
+
+```tsx
+/**
+ * Do example for "Put Workspace and Account Controls at the Edges" on the SidebarMenu page.
+ * Pin the project switcher to the top and the account to the bottom.
+ * @module
+ */
+import { Avatar, SidebarMenu, style } from '@tempoxyz/ds'
+import { ChevronDown, Globe, Grid, Key, Store } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.sidebar()}>
+      <SidebarMenu.Root aria-label="Project" size="small">
+        <SidebarMenu.Item render={<button type="button" />}>
+          <Store />
+          Checkout
+          <ChevronDown {...styles.chevron()} />
+        </SidebarMenu.Item>
+      </SidebarMenu.Root>
+      <SidebarMenu.Root aria-label="Console" size="small" {...styles.body()}>
+        <SidebarMenu.Item active href="#">
+          <Grid />
+          Home
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Key />
+          API keys
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Globe />
+          Webhooks
+        </SidebarMenu.Item>
+      </SidebarMenu.Root>
+      <SidebarMenu.Account>
+        <SidebarMenu.AccountRow description="alice@tempo.xyz" label="Alice Chen">
+          <Avatar size="32">
+            <Avatar.Fallback>AC</Avatar.Fallback>
+          </Avatar>
+        </SidebarMenu.AccountRow>
+      </SidebarMenu.Account>
+    </div>
+  )
+}
+
+namespace styles {
+  export const body = style({ flex: '1 !custom' })
+
+  export const chevron = style({ marginInlineStart: 'auto !custom' })
+
+  export const sidebar = style({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '20rem !custom',
+    rowGap: '12',
+    width: '15rem !custom',
+  })
+}
+```
+
+**Don't:** List the switcher and the account among the pages.
+
+```tsx
+/**
+ * Don't example for "Put Workspace and Account Controls at the Edges" on the SidebarMenu page.
+ * Don't list the switcher and the account among the pages.
+ * @module
+ */
+import { SidebarMenu, style } from '@tempoxyz/ds'
+import { ChevronDown, Globe, Grid, Key, Store, UserCircle } from '@tempoxyz/ds/icons'
+
+/** Renders the static preview, which the guideline card shows inert. */
+export function Demo() {
+  return (
+    <div {...styles.sidebar()}>
+      <SidebarMenu.Root aria-label="Console" size="small">
+        <SidebarMenu.Item active href="#">
+          <Grid />
+          Home
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Key />
+          API keys
+        </SidebarMenu.Item>
+        <SidebarMenu.Item href="#">
+          <Globe />
+          Webhooks
+        </SidebarMenu.Item>
+      </SidebarMenu.Root>
+      <SidebarMenu.Root aria-label="Project" size="small">
+        <SidebarMenu.Item render={<button type="button" />}>
+          <Store />
+          Checkout
+          <ChevronDown {...styles.chevron()} />
+        </SidebarMenu.Item>
+      </SidebarMenu.Root>
+      <SidebarMenu.Root aria-label="Account" size="small">
+        <SidebarMenu.Item render={<button type="button" />}>
+          <UserCircle />
+          Alice Chen
+        </SidebarMenu.Item>
+      </SidebarMenu.Root>
+    </div>
+  )
+}
+
+namespace styles {
+  export const chevron = style({ marginInlineStart: 'auto !custom' })
+
+  export const sidebar = style({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '20rem !custom',
+    rowGap: '12',
+    width: '15rem !custom',
+  })
+}
+```
+
+## Content
+
+* **Items:** Match the page's `AppShell.Title`, such as API keys. Use one or two nouns, without verbs such as Manage.
+* **Group labels:** Short nouns, such as Payments, not repeated in the items below.
+* **Account row:** The person's name over their email or wallet address, such as Piril Akay over <piril@tempo.xyz>.
+* **Logo row:** The product or wallet name over its address, such as Tempo Wallet over 0xc721…s9dk.
+
+## Accessibility
+
+SidebarMenu renders a navigation landmark of links, with disclosure submenus and no menu roles. It follows the [WAI-ARIA Authoring Practices disclosure navigation example](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/).
+
+### Semantics
+
+* **SidebarMenu.Root (nav):** A landmark named "Main" unless you pass `aria-label`.
+* **SidebarMenu.Item (aria-current):** Each item is a link. The active item is marked as the current page.
+* **SidebarMenu.Group (group):** Named by its group label.
+* **SidebarMenu.SubmenuTrigger (aria-expanded):** A button that reports whether its submenu is open. Enter and Space toggle it.
+* **SidebarMenu.SubmenuPanel:** Collapsed links leave the tab order. Under reduced motion, it fades instead of growing.
+* **SidebarMenu.AccountRow (button):** A button named by its two lines. As a menu trigger, it reports whether the menu is open.
+* **SidebarMenu.Account (div):** A plain frame. Its divider is decorative, so it announces no separator before the row.
+* **SidebarMenu.Logo (aria-hidden):** Hidden with the rest of the row's media. The row's label names the product or wallet.
+
+### Keyboard
+
+* **Move Through Items (Tab):** Moves focus through items and submenu triggers.
+* **Follow or Toggle (Enter):** Follows a focused link or toggles a submenu.
+* **Toggle a Submenu (Space):** Toggles the focused submenu.
+
+Arrow keys do not move focus. Links in a landmark use the Tab order.
+
+### Focus
+
+Focus stays on a submenu trigger when it toggles. After it opens, the next Tab moves to its first link.
+
+### Your Responsibilities
+
+* **Name Each Landmark (SC 2.4.1):** If a page has several navigation landmarks, give each a distinct `aria-label`.
+* **Mark One Active Item (active):** Mark only the current page. When it is nested, keep its submenu open.
+* **Name Unlabelled Groups (aria-label):** Name a group that has no visible label.
+* **Keep a Consistent Order (SC 3.2.3):** Keep the item order the same on every page.
+* **Name Pages in Text (aria-hidden):** Icons are hidden from assistive technology. The text label must name the page.
+
+## Related
+
+[AppShell](app-shell.md)
+
+Use for the frame that holds the sidebar.
+
+[Menu](menu.md)
+
+Use for lists of actions.
+
+[Tabs](tabs.md)
+
+Use for views within one page.
+
+[Navigation](../patterns/navigation.md)
+
+Covers choosing between navigation components.