Vera UIComponentsNavigation Components
Navigation Components
Essential components for helping users navigate through your application. From simple breadcrumbs to complex sidebar systems, these components provide flexible navigation patterns.
Components
Primary Navigation
- Sidebar - Collapsible navigation sidebar with groups and icons
- Reusable Sidebar - Pre-built sidebar component with responsive behavior
- Navigation Menu - Horizontal navigation with dropdowns
- Menubar - Desktop-style menu bar navigation with keyboard support
- Breadcrumb - Hierarchical navigation trail
Content Navigation
- Tabs - Section switching and content organization
- Pagination - Multi-page content navigation
- Command - Command palette and search interface
Responsive Patterns
- Sheet - Mobile-friendly slide-out navigation
- Collapsible - Expandable navigation sections
Navigation Patterns
Application Layout with Sidebar
import {
SidebarProvider,
Sidebar,
SidebarContent,
SidebarHeader,
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
SidebarTrigger
} from '@helgadigitals/vera-ui'
function AppLayout({ children }) {
return (
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<h2 className="font-semibold">My App</h2>
</SidebarHeader>
<SidebarContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton asChild>
<a href="/dashboard">Dashboard</a>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton asChild>
<a href="/projects">Projects</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarContent>
</Sidebar>
<main className="flex-1">
<header className="border-b p-4">
<SidebarTrigger />
</header>
{children}
</main>
</SidebarProvider>
)
}Desktop Application with Menubar
import {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
MenubarSeparator,
MenubarShortcut
} from '@helgadigitals/vera-ui'
function DesktopApp() {
return (
<div>
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>New <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
<MenubarItem>Open <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
<MenubarSeparator />
<MenubarItem>Save <MenubarShortcut>⌘S</MenubarShortcut></MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
<MenubarItem>Redo <MenubarShortcut>⌘⇧Z</MenubarShortcut></MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
<main className="flex-1 p-4">
{/* App content */}
</main>
</div>
)
}Responsive Navigation
import {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuContent,
NavigationMenuLink
} from '@helgadigitals/vera-ui'
function MainNavigation() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/products/web">
Web Apps
</NavigationMenuLink>
<NavigationMenuLink href="/products/mobile">
Mobile Apps
</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/about">
About
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
)
}Accessibility Features
- Keyboard Navigation: Full keyboard support with arrow keys and tab navigation
- Screen Readers: Proper semantic navigation landmarks and ARIA labels
- Focus Management: Focus trapping in overlays and logical focus order
- Active States: Clear indication of current location and active items
- Mobile Support: Touch-friendly interactions and responsive behavior
Design Patterns
Hierarchical Navigation
Use breadcrumbs and nested sidebar groups to show content hierarchy and help users understand their location.
Progressive Disclosure
Use collapsible sections and nested menus to reveal navigation options progressively, reducing cognitive load.
Contextual Navigation
Provide different navigation options based on user context, role, or current section of the application.
Textarea
A textarea component for multi-line text input with automatic resizing support. Built with accessibility and user experience in mind, featuring modern styling and seamless integration with forms.
Reusable Sidebar
A flexible navigation sidebar component with grouping, collapsible modes, and responsive behavior for application layouts.