Flex Navbar

A modern navbar with smooth expansion, media panels, and theme controls.

FlexNavbar will appear on top of the page

Installation

npx shadcn@latest add https://scrollxui.dev/registry/flex-navbar.json

Usage

import { FlexNavbar } from "@/components/ui/flex-navbar";
<FlexNavbar
  brandName="ScrollX UI"
  tagline="Motion-first component library"
  launchText="Open-source"
  navLinks={[
    { label: "Components", href: "/docs/components" },
    { label: "Docs", href: "/docs" },
    {
      label: "GitHub",
      href: "https://github.com/Adityakishore0/ScrollX-UI",
    },
    { label: "Showcase", href: "/Showcase" },
  ]}
  media={{
    type: "video",
    src: "/assets/scrollxuilaunch.webm",
    autoplay: false,
  }}
  mediaButtonText="Watch intro"
/>

Changelog

20-01-2026, Improved Navigation Interaction

  • Updated FlexNavbar to automatically collapse when a navigation link is clicked.
  • Added a slight delay before closing the navbar to allow link interactions and transitions to feel smoother.
  • Exposed the collapse behavior via a reusable closeNavbar handler and ensured onExpand stays in sync.

API Reference

Flex Navbar

A modern navbar with smooth expansion, media panels, and theme controls.

Props

PropertyTypeDefaultDescription
logoReactNodeSVG
Logo element displayed on the left side of the navbar.
brandNamestringSTARTUP
Centered brand name text shown in the navbar header.
taglinestringText
Short tagline displayed in the footer section when expanded.
launchTextstringText
Right-aligned secondary text shown in the expanded footer.
navLinksarrayempty
Primary navigation links displayed when the navbar expands.
mediaobjectnone
Media content configuration (image or video) shown inside the expanded navbar.
mediaButtonTextstringOurStory
Text displayed on the media overlay action button.
onMediaClickfunctionnone
Callback triggered when media is clicked or played.
collapsedWidthstring90vw
Width of the navbar in collapsed state.
collapsedMaxWidthstring20rem
Maximum width of the navbar when collapsed.
collapsedHeightstring3.75rem
Height of the navbar in collapsed state.
expandedWidthstring95vw
Width of the navbar when expanded.
expandedMaxWidthstring48.75rem
Maximum width of the expanded navbar.
expandedHeightstring28rem
Expanded navbar height on desktop screens.
expandedHeightMobilestring33rem
Expanded navbar height on mobile devices.
animationDurationnumber0.5
Duration of expand/collapse animation in seconds.
animationEasingarraybezier
Cubic-bezier easing array used by Framer Motion.
showThemeTogglebooleantrue
Controls visibility of the theme switcher in the footer.
onExpandfunctionnone
Callback fired whenever the navbar expands or collapses.

Built withby Ahdeetai.