Staaarter

Mobile Hamburger Menu

A compact header that keeps nav links tucked away by default: a hamburger icon (swapping to an X when open) reveals a vertical list of links below the header on click. Desktop links are not shown separately, the hamburger is the only way to reach them, which keeps this demo honest about exactly what state is driving the UI.

By Staaarter Team
Navbar
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/mobile-hamburger-menu.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/navbar/navbar7.tsx instead.

Usage

The file also exports navbar7Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Navbar7, navbar7Demo } from "@/components/blocks/navbar/navbar7";

export default function Page() {
  return <Navbar7 {...navbar7Demo} />;
}

Props

PropTypeDefaultDescription
wordmarkstring"Kestrel"Logo text rendered as a bold wordmark.
links{ label: string; href: string }[]noneNav links, only visible once the hamburger menu is opened.
cta{ label: string; href: string }noneCall-to-action button, always visible next to the hamburger toggle.
classNamestringnoneExtra classes for the outer header element.

Behavior notes

  • Real client-side state: clicking the hamburger button toggles a useState boolean that conditionally renders (mounts/unmounts) the links nav, not just a CSS visibility class.
  • The icon itself swaps between lucide-react's Menu and X icons based on the same open state.
  • The links list is the only way to see nav links in this block, there is no separate always-visible desktop nav, to keep the demo simple and honest about what triggers what.
  • The CTA button is a static Link-as-Button, it does not perform any real navigation beyond the href you supply.

More Navbar Blocks

View all →

Simple Logo Links CTA

Wordmark on the left, a row of nav links, and a single CTA button on the right.

Centered Logo Split Links

Logo centered in the header with nav links evenly split to its left and right.

Mega Menu Dropdown

A trigger that opens a wide, multi-column mega menu panel below the header.

Navbar With Search

Logo, a few nav links, and a labeled search input with an inline icon.

Two Tier Utility Nav

A thin utility link row above the main navigation row.

Minimal Logo CTA Only

The simplest possible header: just a logo and a single CTA button, no nav links.