Navigation & tabs

  1. Components
  2. Navigation & tabs

Project workspace

Switch between a project summary, delivery tasks, and documents.

Account navigation

Vertical tabs for profile and security.

Personal details

Keep your role and contact details up to date.

Open settings

Security preferences

Review sign-in and notification settings.

Open settings

Team activity

Explore your latest contributions and milestones.

Open settings

Segmented tabs

A soft background keeps related choices together.

Workspace summary

Keep your project priorities, team updates, and next milestones in view.

Open overview

Delivery tasks

Review assigned work and plan the next project milestone.

Open tasks

Shared documents

Organize research notes, roadmaps, and release documents.

Open files

Underline tabs

A minimal navigation style with a subtle active indicator.

Workspace summary

Keep your project priorities, team updates, and next milestones in view.

Open overview

Delivery tasks

Review assigned work and plan the next project milestone.

Open tasks

Shared documents

Organize research notes, roadmaps, and release documents.

Open files

Rounded pills

Rounded buttons for compact section switching.

Workspace summary

Keep your project priorities, team updates, and next milestones in view.

Open overview

Delivery tasks

Review assigned work and plan the next project milestone.

Open tasks

Shared documents

Organize research notes, roadmaps, and release documents.

Open files

Right-aligned tabs

Place navigation at the end of a section header.

Workspace summary

Keep your project priorities, team updates, and next milestones in view.

Open overview

Delivery tasks

Review assigned work and plan the next project milestone.

Open tasks

Shared documents

Organize research notes, roadmaps, and release documents.

Open files

Equal-width tabs

Distribute tab controls evenly across the available width.

Workspace summary

Keep your project priorities, team updates, and next milestones in view.

Open overview

Delivery tasks

Review assigned work and plan the next project milestone.

Open tasks

Shared documents

Organize research notes, roadmaps, and release documents.

Open files

Icon-only tabs

Compact navigation with accessible names.

Workspace summary

Keep your project priorities, team updates, and next milestones in view.

Open overview

Delivery tasks

Review assigned work and plan the next project milestone.

Open tasks

Shared documents

Organize research notes, roadmaps, and release documents.

Open files

Tabs with counts

Show a small count beside each section label.

Workspace summary

Keep your project priorities, team updates, and next milestones in view.

Open overview

Delivery tasks

Review assigned work and plan the next project milestone.

Open tasks

Shared documents

Organize research notes, roadmaps, and release documents.

Open files

Vertical outline tabs

A stacked layout for a narrow settings column.

Workspace summary

Keep your project priorities, team updates, and next milestones in view.

Open overview

Delivery tasks

Review assigned work and plan the next project milestone.

Open tasks

Shared documents

Organize research notes, roadmaps, and release documents.

Open files

Billing views

Full-width tabs distribute navigation evenly.

Resource center

Compact tabs with icons and clear destinations.

Simple workspace links

Lightweight navigation with a disabled destination.

Centered navigation

A balanced layout for related sections.

Navigation with a menu

Keep secondary destinations in a dropdown.

Navigation toolbar

Pair section links with a primary action.

Create invoice