Navigation Components

Navigation components help users move through your application and access different sections. These components provide intuitive ways to organize and present navigation structures.

Overview

ShellUI's navigation components are designed to work seamlessly with Blazor routing, providing accessible and responsive navigation patterns that work across all device sizes.

Available Components

Navbar

Top navigation bar component

Sidebar

Collapsible sidebar navigation

Menubar

Horizontal menu bar

Pagination

Page navigation controls

Tabs

Tabbed content navigation

Stepper

Multi-step form navigation

Breadcrumb

Breadcrumb trail navigation

Accessibility

All navigation components include proper ARIA attributes, keyboard navigation, and screen reader support.

Responsive Design

Navigation components adapt to different screen sizes, with mobile-friendly patterns built-in.

Routing Integration

Components work seamlessly with Blazor's routing system and NavLink components.

Getting Started

# Add navigation components
shellui add navbar sidebar tabs pagination breadcrumb

Common Patterns

<Navbar>
  <NavbarBrand href="/">My App</NavbarBrand>
  <NavbarMenu>
    <NavbarItem href="/docs">Docs</NavbarItem>
    <NavbarItem href="/examples">Examples</NavbarItem>
    <NavbarItem href="/about">About</NavbarItem>
  </NavbarMenu>
</Navbar>

<Sidebar>
  <SidebarHeader>
    <SidebarTitle>Navigation</SidebarTitle>
  </SidebarHeader>
  <SidebarContent>
    <SidebarItem href="/dashboard">Dashboard</SidebarItem>
    <SidebarItem href="/settings">Settings</SidebarItem>
    <SidebarItem href="/profile">Profile</SidebarItem>
  </SidebarContent>
</Sidebar>