Navbar blocks

Marketing site headers: link bars, menus with panels and mobile drawers.

4 variants. Every block is one file built from CK-UI components and works in light and dark mode.

Simple navbar

Logo and links with the current page marked; on small screens the links stay visible in a row that scrolls sideways.

None, plain markup only.

None beyond React and Next.js.

Links, a sign-in link and a primary action; on small screens the links open in a disclosure panel under the bar.

npm install @radix-ui/react-slot class-variance-authority react-icons

NavigationMenu panels for products and resources on desktop, and a sectioned drawer on smaller screens.

Also copy the files they import: ThemeScope.

npm install @radix-ui/react-dialog @radix-ui/react-navigation-menu @radix-ui/react-slot class-variance-authority react-icons

Centered links and actions on desktop; below the large breakpoint a menu button opens a drawer that closes after navigation.

Also copy the files they import: ThemeScope.

npm install @radix-ui/react-dialog @radix-ui/react-slot class-variance-authority react-icons