Navbar · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JNavbar, JNavbarLink } from '@juxtui/ui'

Usage #

<JNavbar>
  <template #brand>
    <NuxtLink to="/">Acme</NuxtLink>
  </template>
  <JNavbarLink :as="NuxtLink" to="/docs" active>Docs</JNavbarLink>
  <JNavbarLink :as="NuxtLink" to="/pricing">Pricing</JNavbarLink>
  <template #actions>
    <JButton size="sm">Sign up</JButton>
  </template>
</JNavbar>

Resize the window below 768px to see the mobile menu. The same links are used in both places, so there is nothing to keep in sync.

The menu closes when a link is chosen, on Escape (focus returns to the burger), on an outside click, and when the window grows past the breakpoint.

Everything in #actions stays visible at every size. Put anything that should only appear in the mobile menu, like a full-width sign-in button, in #menu-footer.

Variants & examples #

In an app#

Links stay inline (collapse="never"), with a dropdown and an avatar menu as actions.

<script setup lang="ts">
import { Hexagon, LogOut, Settings, User } from '@lucide/vue'
</script>

<template>
  <JNavbar :sticky="false" collapse="never" max-width="none">
    <template #brand>
      <a href="#" aria-label="Home" class="text-fg"><Hexagon class="size-5" :stroke-width="1.75" /></a>
    </template>
    <JNavbarLink href="#" active>Overview</JNavbarLink>
    <JNavbarLink href="#">Deployments</JNavbarLink>
    <JNavbarLink href="#">Settings</JNavbarLink>
    <template #actions>
      <JDropdownMenu placement="bottom-end">
        <template #trigger>
          <button type="button" class="rounded-full" aria-label="Account">
            <JAvatar src="/avatars/1.svg" name="Mara Quinn" size="sm" />
          </button>
        </template>
        <JDropdownMenuLabel>mara@acme.com</JDropdownMenuLabel>
        <JDropdownMenuItem><template #leading><User /></template>Profile</JDropdownMenuItem>
        <JDropdownMenuItem><template #leading><Settings /></template>Settings</JDropdownMenuItem>
        <JDropdownMenuSeparator />
        <JDropdownMenuItem><template #leading><LogOut /></template>Sign out</JDropdownMenuItem>
      </JDropdownMenu>
    </template>
  </JNavbar>
</template>

API #

JNavbar

Prop	Type	Default	Description
open	`boolean`	`false`	Mobile menu state. Optionally bound with `v-model:open`.
collapse	`'sm' \| 'md' \| 'lg' \| 'never'`	`'md'`	Width below which links fold into the mobile menu: 640, 768 or 1024px.
sticky	`boolean`	`true`	Stick to the top of the viewport while scrolling.
bordered	`boolean`	`true`	Hairline under the bar.
maxWidth	`string`	`'72rem'`	Maximum content width, or `none` for full width.
label	`string`	`'Main'`	Accessible name of the navigation landmark.

Slots

Slot	Props	Description
brand	—	Logo or product name, usually a link home.
default	—	Links, typically `JNavbarLink`s.
actions	—	Always visible on the right: search, theme, account.
menu-footer	—	Only in the mobile menu, below the links.

JNavbarLink

Prop	Type	Default	Description
active	`boolean`	`false`	Marks the current page (`aria-current="page"`).
as	`string \| Component`	`'a'`	Render as `NuxtLink`, `RouterLink` or any element.

Slots

Slot	Props	Description
default	—	Label.
leading	—	Icon.

Accessibility #

Renders a <header> containing a <nav> landmark named by label.
The burger exposes aria-expanded and aria-controls, and its accessible name switches between “Open menu” and “Close menu”.
The current page is announced with aria-current="page".
Links render once per layout; the one not in use is display: none, so assistive technology never sees them twice.

Keyboard #

Key	Action
`Tab`	Moves through brand, links, actions and the burger in reading order.
`Enter`	On the burger: opens the menu and focuses its first link.
`Esc`	Closes the mobile menu and returns focus to the burger.