Docs

Animated Mobile Navbar

Animated Mobile Navbar

A simple animated mobile navbar component.

Open in
Open

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/animated-mobile-navbar.json

Usage

import {
  AnimatedMobileNavbar,
  AnimatedMobileNavbarContent,
  AnimatedMobileNavbarLink,
  AnimatedMobileNavbarTrigger,
} from "@/components/animated-mobile-navbar";
<AnimatedMobileNavbar>
  <AnimatedMobileNavbarTrigger>Open</AnimatedMobileNavbarTrigger>
  <AnimatedMobileNavbarContent>
    <AnimatedMobileNavbarLink label="Home" href="#" />
    <AnimatedMobileNavbarLink label="About" href="#" />
    <AnimatedMobileNavbarLink label="Services" href="#" />
    <AnimatedMobileNavbarLink label="Contact Us" href="#" />
    <AnimatedMobileNavbarLink label="Pricing" href="#" />
  </AnimatedMobileNavbarContent>
</AnimatedMobileNavbar>

Props

PropTypeDefaultDescription
sidestring"top"Direction from where the animation will start

Examples

Side

Use the side property to <AnimatedMobileNavbarContent> to indicate the direction from where the animation will start. The values can be top, left, or right.

Open in
Loading...

NOTE: The side property is currently available only for React version. The HTML version will be added soon.

Morph NavbarProject Gallery