Skip to main content
The Nav component provides a flexible navigation bar with built-in responsive behavior, optional backdrop blur, and automatic mobile menu handling.

​
Import

import { Nav } from '@luminescent/ui-react';

​
Usage

import { Nav } from '@luminescent/ui-react';

function Example() {
  return (
    <Nav
      start={<div>Logo</div>}
      center={<div>Navigation Links</div>}
      end={<div>User Menu</div>}
      mobile={<div>Mobile Menu Content</div>}
    />
  );
}

​
Props

The Nav component extends all standard HTML <nav> element attributes and accepts the following additional props:
​
start
React.ReactNode
Content displayed on the left side of the navigation bar.
​
center
React.ReactNode
Content displayed in the center of the navigation bar.
​
end
React.ReactNode
Content displayed on the right side of the navigation bar.
​
mobile
React.ReactNode
Content displayed in the mobile hamburger menu (hidden on screens wider than sm breakpoint).
​
fixed
boolean
default:"false"
When true, the navigation bar uses position: fixed, otherwise uses position: absolute.
​
floating
boolean
default:"false"
When enabled, the navigation bar has a floating card style with rounded corners and margins.
​
noblur
boolean
default:"false"
Disables the backdrop blur effect on the navigation bar.
​
nohamburger
boolean
default:"false"
Hides the hamburger menu button and mobile menu completely.
​
nodismiss
boolean
default:"false"
Prevents the mobile menu from automatically closing when clicking outside.
​
colorClass
string
default:"'lum-bg-lum-card-bg'"
CSS class for the background color of the navigation bar.
​
class
{ [key: string]: boolean }
Object of CSS classes with boolean values for conditional styling.

​
Behavior

  • The component is positioned at the top of the page with z-50
  • On mobile (below sm breakpoint), a hamburger menu icon appears in the top right
  • Clicking the hamburger toggles the mobile menu with smooth animations
  • The mobile menu automatically closes when clicking outside (unless nodismiss is true)
  • Elements with the class nav-ignore-dismiss will not trigger menu dismissal when clicked
  • The navigation spans full width with content constrained to a max-w-7xl container

​
Examples

import { Nav } from '@luminescent/ui-react';

function BasicNav() {
  return (
    <Nav
      start={<span className="font-bold">My App</span>}
      end={
        <div className="flex gap-4">
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
        </div>
      }
      mobile={
        <div className="flex flex-col gap-2">
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
        </div>
      }
    />
  );
}
The mobile menu appears below the main navigation bar when opened. Make sure your page content accounts for the navigation height to avoid overlapping, especially when using fixed positioning.

Build docs developers (and LLMs) love

Get started for freeTalk to us