Website header

A marketing navbar: a product menu with descriptions, sign in and sign up, and a menu sheet on phones.

$ pnpm dlx shadcn@latest add @dashral/website-header

When to use

A marketing site's navbar: menus with descriptions, sign in and sign up, and a sheet on phones.
Product sites with several areas (product, solutions, resources) to point people to.

When not to use

Inside an app: Dashboard header or Workspace header.
Sites with only a few pages: Pill header is lighter.

Usage

Website header with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { WebsiteHeader } from "@/components/dashral/blocks/website-header"
2
3<WebsiteHeader
4  brand={{ name: "Acme", href: "/", logo: <Logo /> }}
5  nav={nav}
6  signIn={{ label: "Sign in", href: "/login" }}
7  cta={{ label: "Start free", href: "/register" }}
8/>

API reference

WebsiteHeader

A marketing site's navbar: the logo, menus with a line on each item, plain links, and sign in / sign up. On phones the links move into a sheet, the menus becoming sections that open in place. Every part comes from props.

Prop	Type	Default
`brand`	`{ name: string; href: string; logo?: React.ReactNode }`	`sample`
`nav`	`NavItem[]`	`sample`
`signIn`	`BlockAction \| null` The quiet button before the main one; null hides it.	`sample`
`cta`	`BlockAction`	`sample`

type MenuEntry

An item in a menu: an icon, a title, a line, and where it goes.

Prop	Type	Default
`icon`	`React.ComponentType<{ className?: string; "aria-hidden"?: boolean }>`	—
`title`	`string`	—
`text`	`string`	—
`href`	`string`	—

type NavItem

A nav item: a plain link, or a menu that opens a panel (two columns past three items), with a promo under it.

= | { label: string; href: string; icon?: React.ComponentType<{ className?: string; "aria-hidden"?: boolean }> } | { label: string; items: MenuEntry[]; promo?: { label: string; text: string; href: string } }

type BlockAction

A button: a link with href, or your handler with onClick.

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—
`onClick`	`() => void`	—