Navigation
Navbar
Navbar provides primary navigation and access to key areas of an application or website. It supports branding, navigation, and important user actions.
Examples
Government of India
Skip to Main Content
A-AA+
English
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- Skip to Main Content link in accessibility bar (WCAG 2.4.1)
- Semantic HTML5 header element with role="banner"
- aria-current="page" on active navigation link
- Keyboard accessible navigation with visible focus ring
- Font size controls accessible via keyboard
- Language selector with proper ARIA label
- National emblem marked aria-hidden (decorative)
- Color contrast > 4.5:1 on all text in both bars
When to use this component
✓Do's
- •Page-level header with GOI branding
- •Navigation bar with links to primary sections
- •User account and settings access
- •Accessibility controls for public portals
✗Don'ts
- •Section headers, use heading elements
- •Card headers, use Card header slot
- •Modal headers, use Modal title
- •Inline navigation, use links directly
Do's and Don'ts
✓ Do's, Always include the Accessibility Bar on public portals
Government of India
Skip to Main Content
A-AA+
English
All public GOI portals must include the accessibility bar with Skip to Main Content, font size controls, and language selector. It's a GOI mandate.
✗ Don'ts, Hide the national emblem or accessibility bar
Don't remove the accessibility bar from public-facing portals, it fails GIGW compliance and accessibility audits.