Side Navigation

🧭 When to Use a Side Navigation

Use a Side Navigation when:

• Your app has 3+ primary sections

• Users need persistent access to global nav while working across pages

• You’re building a dashboard, admin view, or settings-heavy layout

Avoid side navigation when:

• The app is linear or task-based (use top nav or tab bars)

• There are only 2–3 navigation destinations (consider inline links or simple tabs)

📦 Sidebar Item

Sidebar Items are the core building blocks of navigation. Each item typically includes:

• An icon

• An optional label (for expanded sidebars)

• Support for nested Level 02 items

🎯 Status Variants

Each item has the following interaction statuses:

• Default – Resting, inactive state

• Hover – Background and icon/text highlight on pointer interaction

• Selected – Indicates the active route or page

These statuses apply to both Level 01 (primary items) and Level 02 (nested items).

🧩 States (Visual Style)

• Filled – Solid background fill; best for active/selected items

• Subtle – Minimal styling with softer emphasis; best for secondary nav or lighter interfaces

Switch between styles depending on contrast needs or UI tone.

🔀 Level 02 Items (Hierarchy)

Level 02 items are indented below a primary (Level 01) item.
Use them when:

• You need to group sub-pages or modules beneath a parent

• Navigation requires drill-down within a single section (e.g., “Settings > Profile > Security”)

Level 02 behavior supports:

• Collapse/expand toggles

• Selectable child items

• Layer logic to reveal nested items only when the parent is selected or hovered

All nested items use consistent spacing and color tokens to indicate their level and reduce clutter.

🧱 Sidebar Layouts

There are two sidebar variants included in the system:

📎 Icon Sidebar

• Shows only icons (no text)

• Used for ultra-compact layouts or mobile/edge UIs

• Tooltips or hover labels are recommended for clarity

• Often collapsible into an expanded version

Use when screen space is at a premium or the icons are well known to your users.

📖 Expanded Sidebar

• Shows both icons and labels

• Supports nested Level 02 navigation

• Includes optional sections, dividers, and grouped links

• Ideal for admin dashboards, SaaS platforms, and complex workflows

This is the default layout for most enterprise or full-layout applications.

♿ Accessibility Considerations

From a design perspective:

• Use consistent focus rings or visual outlines on keyboard navigation

• Maintain clear hierarchy and active states (don’t rely on color alone)

• For icon-only navs, always pair with tooltips for clarity

From a code perspective (if implemented):

• Use semantic nav elements with aria-label

• Mark the selected route with aria-current="page"

• Use role="tree" and role="treeitem" if hierarchical

✅ Best Practices

• Always indicate which route is selected — don’t leave users guessing

• Use Level 02 sparingly — more than 4–5 nested items can overwhelm

• Keep icons consistent in style and size

• Match filled/subtle styles with your product tone (e.g., subtle for neutral, filled for branded)

• Avoid horizontal scrolling in sidebars — make them scrollable vertically only when necessary