Atom UI
NavigationMenus + FlowResponsive

Guide users with clear paths and intent.

Navigation components organize movement, reveal context, and keep interaction predictable across complex interfaces. Build links, menus, bars, and tool controls that scale cleanly from mobile to desktop.

LinksMenusAppBarBottom Nav
Link
inline routing
Menus
layered actions
Toolbar
command clusters
BottomNav
mobile destinations
Segmented Views

Tabs

Tabs keep related content in one place while letting users switch context quickly. They are ideal for settings pages, dashboards, and analytics detail panels.

Variants

Line

Manage profile details, workspace identity, and default preferences.

Soft

Manage profile details, workspace identity, and default preferences.

Vertical + Icons

Snapshot of engagement, delivery health, and growth metrics.

Snapshot of engagement, delivery health, and growth metrics.

Progressive Disclosure

Accordion

Accordions compress dense information into scannable headers and reveal detail on demand. Great for FAQs, specs, and grouped settings where vertical space matters.

Single + Bordered

All primitives provide keyboard interaction, focus management, semantic structure, and state attributes aligned with WAI-ARIA patterns.

Yes. Colors, spacing, radii, and motion are tokenized so active indicators and interactive surfaces stay consistent across modes.

Multiple + Splitted

All primitives provide keyboard interaction, focus management, semantic structure, and state attributes aligned with WAI-ARIA patterns.

Use flat APIs for speed and consistency. Switch to compound APIs when you need custom composition, nested controls, or advanced behavior.
Single Toggle

Collapsible

Collapsible is a lightweight disclosure primitive for one-off details and expandable snippets. Use it when you need one trigger-content pair instead of a full accordion group.

Compound API

Flat API

This panel starts open and can be collapsed for compact reading flow.

Page Traversal

Pagination

Pagination gives users predictable movement through long result sets. Preserve active page context and keep controls reachable on every breakpoint.

Interactive

Current page: 2

Dense + Disabled

Current page: 7
Right-Click Actions

ContextMenu

ContextMenu exposes relevant controls at pointer location. It is useful for content panes, file explorers, and canvas experiences where direct manipulation is common.

Basic Trigger Area

Right-click inside this area

Grouped Actions

Right-click for grouped menu

Command Clusters

Toolbar

Toolbar groups related commands in a compact strip with strong keyboard ergonomics. It works well for editors, design tools, and utility surfaces.

Formatting Toolbar

Vertical + Labeled

Top-Level Shell

AppBar

AppBar anchors branding, key actions, and global controls at the top of the application. Keep structure stable and action density intentional.

Base Structure

TemplateFlow

Navigation playground

Color Modes

primary

info

accent

Mobile Destinations

BottomNavigation

BottomNavigation gives fast access to top-level destinations on mobile screens. Keep the number of items small and labels easy to scan at a glance.

Flat API

Mobile content area

Active route: home

Compound API

Labels can be hidden for compact mode.

Active route: search