LiquiKit
GitHub

Navigation Menu

A navigation bar whose one panel reshapes as you move between titles.

Base UISource

Installation#

pnpmnpmyarnbun
$ pnpm dlx shadcn@latest add @liquikit/navigation-menu

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { NavigationMenu } from "@/components/liquikit/navigation-menu"
<NavigationMenu.Root>
  <NavigationMenu.List aria-label="Main">
    <NavigationMenu.Item>
      <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>
      <NavigationMenu.Content>
        <NavigationMenu.Link href="/laptops" title="Laptops" />
      </NavigationMenu.Content>
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu.Root>

API Reference#

NavigationMenu.Root

PropTypeDefault
theme"light" | "dark"

Light or dark glass. Falls back to the nearest GlassThemeProvider, then light.

—
refraction"interactive" | "always"

When the glass bends the page. interactive bends it while the component is pressed, dragged or focused, always bends it all the time.

"interactive"

Also takes every prop of Base UI's navigation menu, plus className and style.

NavigationMenu.List

PropTypeDefault
theme"light" | "dark"

Light or dark glass. Falls back to the nearest GlassThemeProvider, then light.

—
lensPartial<LensProfile>

Overrides for the lens profile, such as thickness, bevel, ior and magnification.

—
liquidnumber

How far the glass squashes and stretches as it moves. 0 keeps it rigid.

—
refraction"interactive" | "always"

When the glass bends the page. interactive bends it while the component is pressed, dragged or focused, always bends it all the time.

"interactive"
Meter and ProgressNumber Field