Navbar

An enterprise-grade navigation bar component based on BrConfigProvider. Supports responsive collapsing, sticky effects, and mobile adaptation. Provides flexible sub-components for complex navigation structures.

Component Features

📐 Flexible Positioning: Supports sticky and fixed positioning modes.
➡️ Bordered Style: Supports bordered prop to add border styling.
📱 Responsive Collapse: Automatically collapses to hamburger menu on small screens.
⬆️ Scroll Hide: Supports hiding the navbar on scroll with scrollHide prop.
🌤️ Transparent Style: Supports transparent prop for overlay navigation bars.
🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

Basic Usage

The basic navbar includes a brand logo on the left, navigation items in the middle, and action buttons on the right.

<script setup>
import { BrNavbar, BrNavbarBrand, BrNavbarContent, BrNavbarItem, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrNavbar class="border border-border rounded-lg relative z-0">
    <BrNavbarBrand>
      <span class="text-xl font-bold">BreezeUI</span>
    </BrNavbarBrand>
    <BrNavbarContent class="hidden sm:flex gap-6" justify="center">
      <BrNavbarItem href="#" is-active>Home</BrNavbarItem>
      <BrNavbarItem href="#">Products</BrNavbarItem>
      <BrNavbarItem href="#">About Us</BrNavbarItem>
    </BrNavbarContent>
    <BrNavbarContent justify="end">
      <BrButton variant="outline" size="sm" class="mr-2">Login</BrButton>
      <BrButton size="sm">Sign Up</BrButton>
    </BrNavbarContent>
  </BrNavbar>
</template>

Combine with the BrDropdown component to implement multi-level dropdown navigation items.

<script setup>
import { 
  BrNavbar, 
  BrNavbarBrand, 
  BrNavbarContent, 
  BrNavbarItem, 
  BrDropdown, 
  BrDropdownTrigger, 
  BrDropdownContent, 
  BrDropdownItem, 
  BrDropdownSeparator 
} from '@breezeui/vue'
import { ChevronDown } from 'lucide-vue-next'
</script>

<template>
  <BrNavbar class="border border-border rounded-lg relative z-10">
    <BrNavbarBrand>
      <span class="text-xl font-bold text-primary">Enterprise</span>
    </BrNavbarBrand>
    <BrNavbarContent class="hidden sm:flex gap-4">
      <BrNavbarItem href="#">Dashboard</BrNavbarItem>
      
      <BrDropdown>
        <BrDropdownTrigger as-child>
          <BrNavbarItem class="cursor-pointer">
            Solutions
            <ChevronDown class="w-4 h-4 ml-1 opacity-50" />
          </BrNavbarItem>
        </BrDropdownTrigger>
        <BrDropdownContent>
          <BrDropdownItem>Cloud Services</BrDropdownItem>
          <BrDropdownItem>Data Analytics</BrDropdownItem>
          <BrDropdownSeparator />
          <BrDropdownItem>Customer Cases</BrDropdownItem>
        </BrDropdownContent>
      </BrDropdown>
      
      <BrNavbarItem href="#" is-disabled>Docs (Maintenance)</BrNavbarItem>
    </BrNavbarContent>
  </BrNavbar>
</template>

Mobile Responsive

Automatically hides navigation content on small screens, displaying a hamburger menu that expands into a mobile-specific menu upon clicking.

<script setup>
import { 
  BrNavbar, 
  BrNavbarBrand, 
  BrNavbarContent, 
  BrNavbarItem, 
  BrNavbarTrigger, 
  BrNavbarMenu, 
  BrNavbarSeparator, 
  BrButton 
} from '@breezeui/vue'
</script>

<template>
  <BrNavbar class="border border-border rounded-lg relative z-20">
    <BrNavbarBrand>
      <span class="font-bold">Mobile App</span>
    </BrNavbarBrand>
    
    <!-- Desktop visible -->
    <BrNavbarContent class="hidden sm:flex gap-6" justify="center">
      <BrNavbarItem href="#">Features</BrNavbarItem>
      <BrNavbarItem href="#">Pricing</BrNavbarItem>
    </BrNavbarContent>

    <!-- Mobile trigger -->
    <BrNavbarContent justify="end" class="sm:hidden">
      <BrNavbarTrigger />
    </BrNavbarContent>

    <!-- Mobile collapse menu -->
    <template #menu>
      <BrNavbarMenu>
        <BrNavbarItem href="#" class="w-full text-lg py-2">Features</BrNavbarItem>
        <BrNavbarSeparator />
        <BrNavbarItem href="#" class="w-full text-lg py-2">Pricing</BrNavbarItem>
        <BrButton class="w-full mt-4">Get Started</BrButton>
      </BrNavbarMenu>
    </template>
  </BrNavbar>
</template>

Theming

The style of BrNavbar is deeply integrated with TailwindCSS and BrConfigProvider. You can modify colors globally or override them locally using Tailwind classes.

<script setup>
import { 
  BrNavbar, 
  BrNavbarBrand, 
  BrNavbarContent, 
  BrNavbarItem, 
  BrConfigProvider 
} from '@breezeui/vue'
</script>

<template>
  <div class="space-y-8 relative z-0">
    <BrConfigProvider
      :theme="{
        background: '220 20% 98%', 
        primary: '150 60% 50%',    
        border: '220 15% 90%'      
      }"
    >
      <BrNavbar is-bordered class="rounded-t-lg">
        <BrNavbarBrand>Global Theme</BrNavbarBrand>
        <BrNavbarContent>
          <BrNavbarItem is-active>Home</BrNavbarItem>
          <BrNavbarItem>About</BrNavbarItem>
        </BrNavbarContent>
      </BrNavbar>
    </BrConfigProvider>

    <BrNavbar class="!bg-zinc-950 !text-white border border-zinc-800 rounded-lg">
      <BrNavbarBrand>Dark Nav</BrNavbarBrand>
      <BrNavbarContent class="gap-4">
        <BrNavbarItem is-active class="text-white after:bg-white">
          Home
        </BrNavbarItem>
        <BrNavbarItem class="text-zinc-400 hover:text-white">
          Projects
        </BrNavbarItem>
      </BrNavbarContent>
    </BrNavbar>
  </div>
</template>

API

BrNavbar Props

Name	Type	Default	Description
position	`'static' \| 'sticky' \| 'fixed'`	`'sticky'`	Positioning of the navbar
isBordered	`boolean`	`false`	Whether to display a bottom border
shouldHideOnScroll	`boolean`	`false`	Whether to hide automatically when scrolling down
isTransparent	`boolean`	`false`	Whether it is transparent initially and shows background after scrolling
scrollTrigger	`number`	`20`	Scroll distance (px) to trigger the scroll style
class	`string`	`-`	Custom class names

BrNavbarBrand Props

Name	Type	Default	Description
class	`string`	`-`	Custom class names

BrNavbarContent Props

Name	Type	Default	Description
justify	`'start' \| 'center' \| 'end'`	`'start'`	Alignment of the content
class	`string`	`-`	Custom class names

BrNavbarItem Props

Name	Type	Default	Description
isActive	`boolean`	`false`	Whether it is in an active state
isDisabled	`boolean`	`false`	Whether it is disabled
href	`string`	`-`	Link URL (renders as an `a` tag if present)
class	`string`	`-`	Custom class names

BrNavbarTrigger Props

Name	Type	Default	Description
ariaLabel	`string`	`'Toggle navigation menu'`	Accessibility label

#Navbar

#Component Features

#Basic Usage

#With Dropdown Menu

#Mobile Responsive

#Theming

#API

#BrNavbar Props

#BrNavbarBrand Props

#BrNavbarContent Props

#BrNavbarItem Props

#BrNavbarTrigger Props