Docs

Notch Nav

Notch Nav

A Notch style trigger that reveals the navigation menu from above.

Open in
Loading...

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/notch-nav.json

Usage

import {
  NotchNav,
  NotchNavContent,
  NotchNavItem,
  NotchNavTrigger,
} from "@/components/notch-nav";
<NotchNav>
  <NotchNavTrigger />
  <NotchNavContent>
    <NotchNavItem href="/">Home</NotchNavItem>
    <NotchNavItem href="/about">About</NotchNavItem>
    <NotchNavItem href="/products">Products</NotchNavItem>
    <NotchNavItem href="/services">Services</NotchNavItem>
    <NotchNavItem href="/contact">Contact</NotchNavItem>
  </NotchNavContent>
</NotchNav>

NOTE: <NotchNavTrigger /> includes all required animation and interaction logic out of the box. The trigger is absolutely positioned at top-0 so ensure the parent container has relative position.

Props / Data Attributes

<NotchNavTrigger />

PropTypeDefaultDescription
classNamestring-Optional class names for custom styling.

<NotchNavContent />

PropTypeDefaultDescription
childrenReact.ReactNode-The navigation items rendered inside the notch menu.
offsetYnumber20Vertical offset from top (in pixels) applied when the menu slides in from above.

<NotchNavItem />

PropTypeDefaultDescription
childrenReact.ReactNode-The label content of the navigation item.
hrefstring-Destination URL for the navigation item.
classNamestring-Optional class names for custom styling.

Credits

This component is inspired from this website.

HTMLMorph Navbar