juxt.ui

Layout

Burger

A menu button whose three lines fold into a cross. Built into Navbar, and available on its own for custom headers and drawers.

Closed
Copy
<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <JBurger v-model="open" />
  <span class="text-sm text-fg-muted">{{ open ? 'Open' : 'Closed' }}</span>
</template>

Installation #

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

Copy
import { JBurger } from '@juxtui/ui'

Usage #

Copy
<JBurger v-model="open" controls="site-menu" />

Variants & examples #

Opening a sheet#

Pair it with JSheet for a side menu.

Copy
<script setup lang="ts">
const open = ref(false)
</script>

<template>
  <JBurger v-model="open" />
  <JSheet v-model:open="open" side="left" size="sm" title="Menu">
    <nav class="flex flex-col gap-1" aria-label="Site">
      <a href="#" class="rounded-sm px-2 py-2 text-fg hover:bg-surface-hover">Product</a>
      <a href="#" class="rounded-sm px-2 py-2 text-fg hover:bg-surface-hover">Pricing</a>
      <a href="#" class="rounded-sm px-2 py-2 text-fg hover:bg-surface-hover">Customers</a>
    </nav>
  </JSheet>
</template>

API #

Props

PropTypeDefault Description
modelValuebooleanfalseOpen state, bound with v-model.
controlsstring—Id of the element it shows and hides (aria-controls).
openLabelstring'Open menu'Accessible name while closed.
closeLabelstring'Close menu'Accessible name while open.
size'sm' | 'md''md'28 or 34px.

Events

EventPayload Description
update:modelValuebooleanEmitted on click.

Accessibility #

  • A native <button> with aria-expanded. The icon is decorative; the label names the action.
  • The fold animation is turned off under reduced motion.

Keyboard #

Key Action
EnterToggles.
SpaceToggles.