Navbar 導覽列

具響應式設計的頂部導覽列，支援玻璃變體與內建行動版漢堡選單。

Demo

Glass Light（適用淺色背景）

⬡ My App

HomeBlogAbout

Glass Dark（適用深色背景）

⬡ My App

DashboardJobsCandidates

Default（純白實色）

My App

HomeDocs

使用方式

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

<template>
  <LiquidNavbar variant="glass-light" :sticky="true">
    <!-- Logo 區域（左側） -->
    <template #logo>
      <span class="brand">⬡ MyBrand</span>
    </template>

    <!-- 導覽連結（中央） -->
    <template #links>
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
      <a href="/about">About</a>
    </template>

    <!-- 操作按鈕（右側） -->
    <template #actions>
      <LiquidButton variant="outline" size="sm">Login</LiquidButton>
      <LiquidButton variant="primary" size="sm">Sign Up</LiquidButton>
    </template>
  </LiquidNavbar>
</template>

Props

Prop	型別	預設值	說明
variant	'default' | 'glass-css-only' | 'glass-light'	'default'	視覺樣式變體
sticky	boolean	true	是否在捲動時固定於頂部（position: sticky）

Slots

Slot	說明
logo	左側區域，通常為品牌 Logo 或名稱
links	中央區域，導覽連結
actions	右側區域，CTA 按鈕或使用者選單

注意事項

• glass-light：背景為 rgba(255,255,255,0.65)，最適合淺色頁面背景（Blog Demo）。
• glass-css-only：背景為 rgba(255,255,255,0.1)，最適合深色頁面背景（Admin Demo）。
• 兩種玻璃變體均使用 backdrop-filter: blur(16px)。
• Navbar 內建行動版漢堡選單，links slot 的內容在 max-width: 640px 時會顯示於下拉選單中。