Navbar

A responsive top navigation bar with glass variants and built-in mobile hamburger menu.

Demo

Glass Light (for light backgrounds)

⬡ My App

HomeBlogAbout

Glass Dark (for dark backgrounds)

⬡ My App

DashboardJobsCandidates

Default (Solid white)

My App

HomeDocs

Usage

<script setup lang="ts">
import { LiquidNavbar, LiquidButton } from '@liquid/ui'
</script>

<template>
  <LiquidNavbar variant="glass-light" :sticky="true">
    <!-- Logo area (left) -->
    <template #logo>
      <span class="brand">⬡ MyBrand</span>
    </template>

    <!-- Navigation links (center) -->
    <template #links>
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
      <a href="/about">About</a>
    </template>

    <!-- Action buttons (right) -->
    <template #actions>
      <LiquidButton variant="outline" size="sm">Login</LiquidButton>
      <LiquidButton variant="primary" size="sm">Sign Up</LiquidButton>
    </template>
  </LiquidNavbar>
</template>

Props

Prop	Type	Default	Description
variant	'default' | 'glass-css-only' | 'glass-light'	'default'	Visual style variant
sticky	boolean	true	Whether the navbar sticks to the top on scroll (position: sticky)

Slots

Slot	Description
logo	Left area — typically brand logo or name
links	Center area — navigation links
actions	Right area — CTA buttons, user menu

Notes

• glass-light: rgba(255,255,255,0.65) background — best for light page backgrounds (Blog demo).
• glass-css-only: rgba(255,255,255,0.1) background — best for dark page backgrounds (Admin demo).
• Both glass variants use backdrop-filter: blur(16px).
• The Navbar includes a built-in mobile hamburger toggle. The links slot content is shown in the mobile dropdown menu at max-width: 640px.