Navigation Header

A top navigation header for the app.

Overview

Install

npx shadcn@latest add /r/navigation-header.json

Examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Features

• Sticky header that stays at top on scroll
• Logo with optional link
• Desktop navigation menu
• Mobile hamburger menu
• Custom action buttons/links
• Fully responsive design
• Keyboard accessible navigation

Props

• logo - Optional logo element (React node)
• logoText - Logo text (default: "Fragment UI")
• logoHref - Logo link URL (default: "/")
• links - Array of navigation links (default: Components, Blocks, Docs)
• actions - Custom action buttons/links (default: Sign In, Get Started)
• mobileMenu - Enable/disable mobile menu (default: true)

Link Structure

interface Link {
  href: string;
  label: string;
}

Accessibility

The header uses semantic navigation elements, proper ARIA landmarks, and is fully keyboard accessible. Mobile menu includes focus management.