Sakuga Back to Sakuga
Theme
Sound
Jump to a component

Core · Navigation

SideNav

The creator sidebar: product, a switcher for the current workspace, grouped sections, a footer slot and the signed-in account at the bottom. The account is always shown. The current item reads in ink weight with the small state dot beside its name: no fill, no edge.

@anicanon/sakuga/uiv1.0Used onWeb

Live, from @anicanon/sakuga 2.0.0

Sakuga for iOS and Android is coming

iOS

Web only

SideNav is made for the web, and isn’t part of Sakuga for iOS yet.

Android

Web only

SideNav is made for the web, and isn’t part of Sakuga for Android yet.

Use it for
The creator sidebar: the switcher for the current workspace, grouped sections and the signed-in account at the bottom.
Not for
  • The main sections a viewer moves between on desktopTopNav
  • The views and scenes inside a productionProductionNav
  • Navigation on a phoneTabBar

Guidelines

Motion: state changes fade with motion-fast; entrances use motion-base and ease-enter.

  • switcher.onClick and switcher.open (whether its list is open) make the switcher work; account.onClick makes the account button work.
SideNavExample.jsxReact
import { SideNav } from '@anicanon/sakuga/ui';

export default function SideNavExample() {
  return (
    <SideNav
      brand={{ name: 'AniCanon', product: 'Studio' }}
      switcher={{ label: 'EBA' }}
      groups={[
        { items: [{ label: 'Home', icon: 'home' }] },
        {
          title: 'Make',
          items: [{ label: 'Studio', icon: 'image', current: true }],
        },
      ]}
      account={{ name: 'Raul Menezes', handle: '@rmenezes' }}
    />
  );
}

PropsSideNavProps

groupsrequired
{ title?: string; items: { label: string; icon?: IconName; current?: boolean; href?: string; onClick?: MouseEventHandler; }[]; }[]
An item with href is a link; without, a button that runs its onClick.
accountrequired
{ name: string; handle?: string; image?: string; onClick?: MouseEventHandler; }
Always pass it.
brand
{ logo?: string; name?: string; product?: string; href?: string; }
switcher
{ label: string; image?: string; /** Default "Series". */ prefix?: string; /** Whether its list is open. */ open?: boolean; /** The id of what it opens. */ controls?: string; onClick?: MouseEventHandler; }
The current series or workspace.
label
stringDefault 'Sections'
children
ReactNode
The footer slot, above the account.
className
string

An IconName is any of the names Icon lists.

SideNavExample.swiftiOS · coming soon
SideNavExample.ktAndroid · coming soon

Each token reads a role, and the role lands on a value in each theme. Change the role and every component that reads it follows.

Colour

sidebar-bgStudio sidebar: its panel.
bg-surfaceneutral-0#ffffff
bg-surfaceneutral-900#111117
sidebar-borderStudio sidebar: edge against the page.
border-hairlineshade-a08rgba(11,10,16,0.08)
border-hairlinewhite-a06rgba(255,255,255,0.06)
sidebar-groupStudio sidebar: group headings (Make, Cast and world).
text-mutedneutral-600#5c5b67
text-mutedneutral-400#a3a3a7
sidebar-item-fgStudio sidebar: idle items.
text-secondaryneutral-800#2e2d36
text-secondaryneutral-200#dcdcde
sidebar-item-hover-bgStudio sidebar: hovered item.
bg-fill-subtleshade-a06rgba(11,10,16,0.06)
bg-fill-subtlewhite-a08rgba(255,255,255,0.08)
sidebar-item-active-fgStudio sidebar: the current page name.
text-primaryneutral-925#0b0a10
text-primaryneutral-0#ffffff

Space and shape

sidebar-width
its own value
232px
sidebar-gap
gap-xl
16px
sidebar-padding-y
inset-lg
16px
sidebar-padding-x
inset-lg
16px
sidebar-edge-right-width
its own value
1px
sidebar-brand-gap
gap-md
8px
sidebar-brand-padding-x
inset-sm
8px
sidebar-brand-img-size
its own value
24px
sidebar-switch-gap
gap-lg
12px
sidebar-switch-padding
inset-xs
4px
sidebar-switch-radius
radius-md
12px
sidebar-switch-img-size
its own value
32px
sidebar-switch-img-radius
radius-sm
8px
sidebar-nav-gap
gap-lg
12px
sidebar-group-gap
gap-2xs
2px
sidebar-title-margin-bottom
gap-xs
4px
sidebar-title-padding-x
inset-md
12px
sidebar-item-gap
gap-lg
12px
sidebar-item-height
size-control-sm
36px
sidebar-item-padding-x
inset-md
12px
sidebar-item-radius
radius-sm
8px
sidebar-focus-outline-offset
focus-ring-offset
3px
sidebar-account-gap
gap-lg
12px
sidebar-account-padding
inset-sm
8px
sidebar-account-radius
radius-md
12px
sidebar-account-img-size
its own value
32px
sidebar-switch-chevron-icon-size
icon-size-sm
16px
sidebar-item-icon-size
icon-size-sm
16px
sidebar-who-chevron-icon-size
icon-size-sm
16px
sidebar-active-scale
scale-press-lg
.98
sidebar-forced-edge-width
line-hairline
1px

Type

sidebar-font-family
font-sans
Funnel Sans
sidebar-name-font
text-title-4
700 17px/22px "Funnel Display", "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
sidebar-product-font
text-caption-strong
600 13px/18px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
sidebar-switch-font
text-label
600 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
sidebar-title-font
text-micro
700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
sidebar-item-font
text-body
400 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
sidebar-item-page-font-weight
weight-bold
700
sidebar-account-font-family
font-sans
Funnel Sans
sidebar-initials-font
text-micro
700 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
sidebar-who-b-font
text-label
600 14px/20px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif
sidebar-who-span-font
text-small
500 12px/16px "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif

Motion

sidebar-switch-duration
motion-fast
160ms
sidebar-switch-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)
sidebar-item-duration
motion-fast
160ms
sidebar-item-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)
sidebar-account-duration
motion-fast
160ms
sidebar-account-easing
ease-standard
cubic-bezier(0.2, 0, 0, 1)
sidebar-active-duration
motion-instant
100ms

Checked automatically with axe-core 4.11.4 against WCAG 2.2 A and AA, on the live preview above, in light and dark, on 26 October 2026.

Result
No issues found, in light or in dark.
By design
A complementary region named by label (default "Sections"); Tab moves through the brand link (without brand.href, the name alone), the series switcher ("Series: Ember Bay. Switch", expanded or collapsed from switcher.open, running switcher.onClick, controlling switcher.controls), the links of a navigation named "Sections navigation" (each group named by its title, the current link "current page"; an item without href is a button running its onClick), the footer slot (children) and the account button ("Your account, Aiko Mori", running account.onClick). Icons and pictures are hidden.
Not tested
The automated check doesn't test keyboard use, focus order or what a screen reader says. The lines above are the design system's own account of them.