Site header

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

$npx shadcn@latest add @silicon-ui/site-header

Installation

$npx shadcn@latest add @silicon-ui/site-header

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/site-header/site-header.tsx
- components/silicon-ui/blocks/site-header/site-header.module.css
- components/silicon-ui/lib/media.ts shared
- components/silicon-ui/segmented-control/segmented-control.tsx shared
- components/silicon-ui/segmented-control/segmented-control.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { SiteHeader } from "@/components/silicon-ui/blocks/site-header/site-header";

Prop	Type	Default
`variant` `simple` puts links beside the brand, `centered` centers them in a quiet capsule, `mega` opens panels for items with links.	`SiteHeaderVariant` `"simple""centered""mega"`	`"mega"`
`brand`	`{ name: string; href?: string; mark?: ReactNode }`	`{ name: "Silicon" }`
`items`	`SiteHeaderItem[]`	`siteHeaderExampleItems`
`current` Value of the item that holds the current page (controlled).	`string`	—
`defaultCurrent` Initial current item when uncontrolled.	`string`	—
`onCurrentChange` Called when a destination inside an item is chosen, with that item's value.	`(value: string) => void`	—
`onNavigate` Called for every destination: items, panel links, the brand, and actions with an href.	`(destination: SiteHeaderDestination) => void`	—
`secondaryAction` A quiet action before the primary one, such as Sign in. Pass null to hide it.	`SiteHeaderAction \| null`	`{ label: "Sign in" }`
`primaryAction` The one primary action at the end of the bar. Pass null to hide it.	`SiteHeaderAction \| null`	`{ label: "Get Silicon" }`
`sticky` Sticks to the top of its scroll container. Defaults to true.	`boolean`	`true`
`scrollContainer` The element that scrolls, when it is not the window. The header turns solid once it scrolls.	`RefObject<HTMLElement \| null>`	—
`scrollThreshold` Pixels of scroll before the background turns solid. Defaults to 8.	`number`	`8`
`label` Accessible name of the navigation landmark.	`string`	`"Main"`
`className`	`string`	—

Also accepts the props of HTMLAttributes.

Prop	Type	Default
`className`	`string`	—

Prop	Type	Default
`variant`	`SiteHeaderVariant` `"simple""centered""mega"`	`"mega"`