Navigation

Two navigation patterns: sidebar (desktop, Ontograph-style) and bottom bar (mobile, Still Phone-style). Both use mono labels and component tokens from components.css.

Sidebar Navigation

COLLAPSE

AIAIAI Studio

Sidebar States

DEFAULT

Default state

HOVER

Hover state

ACTIVE

Active / current page

WITH BADGE 5

With notification badge

SECTION HEADER

Section divider label

Bottom Navigation

Home

Search

Create

Activity

Profile

Default

Default

With badge

Default

Disabled

TOKEN REFERENCE

Sidebar:

--nav-sidebar-width: 240px --nav-sidebar-width-collapsed: 48px --nav-item-height: 32px --nav-item-font: var(--type-label-font)

Bottom bar:

--nav-bottom-height: 56px --nav-bottom-item-color: var(--color-text-muted) --nav-bottom-item-color-active: var(--color-accent)