Footer · juxt.ui

Footer

The end of the page: a brand block, columns of links and a closing line for legal text. Columns fold into two on small screens.

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

<template>
  <JFooter>
    <template #brand>
      <span class="flex items-center gap-2 text-sm font-semibold text-fg">
        <Hexagon class="size-5" :stroke-width="1.75" />
        Acme
      </span>
      <p>Deploy, observe and scale web apps without the busywork.</p>
    </template>
    <JFooterColumn title="Product">
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Changelog</a>
    </JFooterColumn>
    <JFooterColumn title="Resources">
      <a href="#">Documentation</a>
      <a href="#">Guides</a>
      <a href="#">Status</a>
    </JFooterColumn>
    <JFooterColumn title="Company">
      <a href="#">About</a>
      <a href="#">Careers</a>
      <a href="#">Contact</a>
    </JFooterColumn>
    <template #bottom>
      <span>© 2026 Acme Inc.</span>
      <span class="flex gap-4">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
      </span>
    </template>
  </JFooter>
</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:

import { JFooter, JFooterColumn } from '@juxtui/ui'

Usage #

<JFooter>
  <template #brand>Acme builds tools for teams.</template>
  <JFooterColumn title="Product">
    <a href="/pricing">Pricing</a>
    <a href="/changelog">Changelog</a>
  </JFooterColumn>
  <template #bottom>© 2026 Acme</template>
</JFooter>

Variants & examples #

Minimal#

Just the bottom line, for apps and small sites.

<template>
  <JFooter>
    <template #bottom>
      <span>© 2026 Acme Inc.</span>
      <span class="flex gap-4">
        <a href="#">Status</a>
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
      </span>
    </template>
  </JFooter>
</template>

API #

JFooter

Prop	Type	Default	Description
maxWidth	`string`	`'72rem'`	Maximum content width, or `none`.
bordered	`boolean`	`true`	Hairline above the footer.

Slots

Slot	Props	Description
brand	—	Logo and a short line about the product.
default	—	`JFooterColumn`s.
bottom	—	Copyright, legal links, social icons.

JFooterColumn

Prop	Type	Default	Description
title	`string`	—	Column heading; also names the column’s nav landmark.

Slots

Slot	Props	Description
default	—	Links. Plain `<a>` and `NuxtLink` are styled automatically.

Accessibility #

Renders a <footer> (the page’s contentinfo landmark when it is the top-level footer).
Each column is a <nav> labelled by its title, so screen reader users can jump between them.