Installation

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

Usage

Create a wrapper div with id="notch-nav"

<div id="notch-nav"></div>

Place a button with id="notch-nav-trigger" inside the wrapper div. The button can remain empty as the icons are already handled by the script.js file.

<div id="notch-nav">
  <button id="notch-nav-trigger"></button>
</div>

Create a div with id="notch-nav-content" inside the wrapper div and place your links inside the <a> tags with class="notch-nav-item".

<div id="notch-nav">
  <button id="notch-nav-trigger"></button>
  <div id="notch-nav-content">
    <a href="#" class="notch-nav-item">Home</a>
    <a href="#" class="notch-nav-item">About</a>
    <a href="#" class="notch-nav-item">Services</a>
    <a href="#" class="notch-nav-item">Portfolio</a>
    <a href="#" class="notch-nav-item">Contact</a>
  </div>
</div>

You can optionally control the vertical offset using the data-offset-y attribute on #notch-nav-content.

NOTE: Do not change any of the IDs as the styles and animations are dependent on them.

Data Attributes

#notch-nav-content

Credits

This component is inspired from this website.