Navigation Components
Navigation molecules that combine atomic elements for comprehensive wayfinding and user flow patterns
5
Nav Types
3
Layout Options
100%
Responsive
WCAG
AA Accessible
Multi
Device Support
Interactive Navigation Builder
Customize Navigation
Preview
Botnar
Menu
Main content area
Tab content area
Navigation Types
Header Navigation
Primary navigation with branding, main menu items, and user actions
Fondation Botnar
Sidebar Navigation
Vertical navigation menu with hierarchical organization
Dashboard
Main Content Area
Sidebar provides consistent navigation
Breadcrumb Navigation
Hierarchical navigation showing current location in site structure
Annual Report 2024
Comprehensive overview of child nutrition program outcomes
Tab Navigation
Content organization with tabbed interface for related sections
Project Overview
This comprehensive health initiative focuses on improving child nutrition outcomes across developing regions.
Our multi-year program combines direct intervention, community education, and policy advocacy.
Pagination Navigation
Navigation through large datasets with page controls
Showing 1-10 of
97 results
Project Alpha - Child Health Initiative
Updated 2 hours ago
Project Beta - Nutrition Education Program
Updated 4 hours ago
Project Gamma - Community Health Centers
Updated 1 day ago
Usage Guidelines
Best Practices
- • Use consistent navigation patterns across pages
- • Provide clear visual hierarchy in navigation
- • Include active states for current page/section
- • Ensure navigation is keyboard accessible
- • Use descriptive labels for navigation items
- • Test navigation on mobile devices
Common Mistakes
- • Inconsistent navigation placement across pages
- • Missing focus indicators for keyboard users
- • Overcrowding navigation with too many items
- • Unclear or ambiguous navigation labels
- • Not testing navigation on mobile devices
- • Missing breadcrumbs in deep hierarchies