Skip to main content
The Nav component provides a flexible navigation bar with support for fixed/floating positioning, backdrop blur, responsive hamburger menu, and three content areas (start, center, end).

​
Import

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

​
Usage

<Nav fixed>
  <div q:slot="start">
    <Logo />
  </div>
  <div q:slot="center">
    <NavLinks />
  </div>
  <div q:slot="end">
    <ThemeToggle />
  </div>
  <div q:slot="mobile">
    <MobileMenu />
  </div>
</Nav>

​
Props

​
fixed
boolean
When true, the nav uses position: fixed instead of position: absolute.
​
floating
boolean
When true, the nav appears as a floating card with rounded corners and borders instead of full-width.
​
noblur
boolean
Disables the backdrop blur effect.
​
nohamburger
boolean
Hides the hamburger menu button and mobile menu panel.
​
nodismiss
boolean
Prevents the mobile menu from auto-closing when clicking outside of it.
​
colorClass
string
default:"lum-bg-lum-card-bg"
Custom background color class for the navigation bar.
​
class
{ [key: string]: boolean }
Object-based class names for conditional styling.
​
...props
PropsOf<'nav'>
All standard HTML nav attributes are supported.

​
Slots

​
start
slot
Content aligned to the left side of the nav (e.g., logo).
​
center
slot
Content centered in the nav (e.g., main navigation links).
​
end
slot
Content aligned to the right side (e.g., theme toggle, user menu).
​
mobile
slot
Content shown in the mobile menu dropdown (hidden on sm+ screens).

​
Examples

<Nav fixed>
  <div q:slot="start">
    <h1>My App</h1>
  </div>
  <div q:slot="end">
    <button>Login</button>
  </div>
</Nav>

​
Behavior

The mobile menu automatically closes when clicking outside unless nodismiss is enabled. Elements with the class nav-ignore-dismiss will not trigger the menu to close. The hamburger menu is hidden on screens sm (640px) and larger.

​
Responsive Design

  • Mobile menu appears below the nav bar with smooth transitions
  • Hamburger button only visible on screens smaller than sm breakpoint
  • Desktop slots (start, center, end) always visible
  • Mobile slot only visible when menu is opened and screen is below sm

​
Styling Features

  • Backdrop blur effect (unless noblur is set)
  • Max width of 7xl with auto margins for centered layout
  • Smooth transitions with scale and opacity animations
  • Z-index of 50 for proper layering

Build docs developers (and LLMs) love

Get started for freeTalk to us