Components

Navigation Bar

A data-driven bottom / island navigation bar.

UiNavigationBar renders a navigation bar from an array of items — ideal for mobile bottom navigation or an island-style bar.

Add a navigation bar

<script setup lang="ts">
import type { INavItem } from '@colorffy/ui'
import { NuxtLink } from '#components'

const items: INavItem[] = [
  { id: 'home', to: '/', icon: '&#xe88a;', text: 'Home', ariaLabel: 'Home' },
  { id: 'search', to: '/search', icon: '&#xe8b6;', text: 'Search', ariaLabel: 'Search' },
  { id: 'profile', to: '/profile', icon: '&#xe853;', text: 'Profile', ariaLabel: 'Profile' },
]
</script>

<template>
  <UiNavigationBar :as="NuxtLink" :items="items" active-item="home" />
</template>

Style as a frosted island

<template>
  <UiNavigationBar :items="items" island frosted indicator-tab />
</template>

Props

Prop	Type	Default	Description
`items`	`INavItem[]`	—	Items: `{ id, to, icon, text?, ariaLabel }`.
`activeItem`	`string \| null`	—	Active item id or path.
`as`	`string \| object`	`'a'`	Link component (`'a'`, `'router-link'`, `NuxtLink`).
`island`	`boolean`	`false`	Island variant.
`frosted`	`boolean`	`false`	Frosted-glass effect.
`indicatorTab`	`boolean`	`false`	Tab-style active indicator.
`indicatorFrosted`	`boolean`	`false`	Frosted active indicator.

Edit this pageorReport an issue

Navbar

Build a top navigation bar with brand, links, avatar, and a sidebar toggle.

Popover

An anchored popover panel built on the native Popover API and CSS anchor positioning.