Site header

A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.

Library

Arc Library

Framework

React

Type

block

License

MIT

Dependencies

lucide-react, motion

Install

npx shadcn@latest add https://uiarc.dev/r/site-header.json

Files

• registry/blocks/site-header/site-header.tsx
• registry/blocks/site-header/site-header.module.css
• lib/media.ts
• registry/components/segmented-control/segmented-control.tsx
• registry/components/segmented-control/segmented-control.module.css
• registry/motion-tokens.ts
• lib/motion-tokens.ts

Source

https://github.com/kuratlielia/arc-library

Categories

• Mega Menu Components
• React Mega Menu Components
• Menu Components
• React Menu Components
• Animated Menu Components
• Navbar Components
• React Navbar Components
• Animated Navbar Components
• Navigation Components
• React Navigation Components
• Animated Navigation Components

More from Arc Library

• Context menu
• Dropdown menu
• Split button
• User menu
• Accordion
• Action button
• Action swap
• Activity heatmap
• Alert
• Animated counter
• Announcement bar
• Avatar