Ermine UI

Bottom nav

A phone's tab bar: a few destinations along the bottom edge, each an icon and a word, with an optional count.

Source on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add bottom-nav
pnpm dlx ermineui add bottom-nav
yarn dlx ermineui add bottom-nav
bunx ermineui add bottom-nav

That copies 3 files into src/components/ui/bottom-nav/. Files you already have are kept.

Use

import { BottomNav, BottomNavItem } from '@/components/ui/bottom-nav'
<script setup lang="ts">
import { BottomNav } from '@/components/ui/bottom-nav'
</script>

<template>
  <BottomNav />
</template>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island. The props are documented in the source below, on each one.

What gets copied

FileWhere it goes
BottomNav.vuesrc/components/ui/bottom-nav/BottomNav.vue
BottomNavItem.vuesrc/components/ui/bottom-nav/BottomNavItem.vue
index.tssrc/components/ui/bottom-nav/index.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

BottomNav.vue 124 lines
<script setup lang="ts">
withDefaults(
  defineProps<{
    /** Accessible name of the navigation. */
    label?: string
    /** Pin the bar to the bottom of the screen. Turn off to place it yourself. */
    fixed?: boolean
  }>(),
  { label: 'Main', fixed: true },
)
</script>

<template>
  <nav class="er-bottom-nav" :aria-label="label" :data-fixed="fixed ? '' : undefined">
    <slot />
  </nav>
</template>

<style>
@layer components {
  .er-bottom-nav {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    width: 100%;
    border-top: 1px solid var(--er-border);
    background: var(--er-background);
  }

  /* Clear of the home indicator on phones without a button; the page needs padding of its own to scroll past the bar. */
  .er-bottom-nav[data-fixed] {
    position: fixed;
    inset: auto 0 0;
    z-index: 10;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .er-bottom-nav-item {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.5rem 0.25rem 0.375rem;
    border: 0;
    background: transparent;
    color: var(--er-muted-foreground);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: var(--er-weight-medium);
    line-height: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--er-duration);
  }

  .er-bottom-nav-item:hover,
  .er-bottom-nav-item[aria-current] {
    color: var(--er-foreground);
  }

  /* The current page is marked by a bar as well as by colour. */
  .er-bottom-nav-item[aria-current]::before {
    content: '';
    position: absolute;
    top: -1px;
    width: 2rem;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--er-primary);
  }

  .er-bottom-nav-item:focus-visible {
    outline: 2px solid var(--er-ring);
    outline-offset: -2px;
  }

  .er-bottom-nav-icon {
    position: relative;
    display: grid;
    place-items: center;
    height: 1.5rem;
  }

  .er-bottom-nav-icon svg {
    width: 1.375rem;
    height: 1.375rem;
  }

  .er-bottom-nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .er-bottom-nav-badge {
    position: absolute;
    top: -0.25rem;
    left: calc(50% + 0.375rem);
    display: grid;
    place-items: center;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--er-destructive);
    color: var(--er-destructive-foreground);
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .er-bottom-nav-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
</style>
BottomNavItem.vue 31 lines
<script setup lang="ts">
import type { Component } from 'vue'

withDefaults(
  defineProps<{
    label: string
    href?: string
    /** This is the page being shown. */
    current?: boolean
    /** A small count over the icon, e.g. items in the cart. Hidden when empty or zero. */
    badge?: number | string
    /** What the count is of, for screen readers: "items in cart". */
    badgeLabel?: string
    /** Tag or component to render, e.g. NuxtLink. */
    as?: string | Component
  }>(),
  { as: 'a' },
)
</script>

<template>
  <component :is="as" :href="href" class="er-bottom-nav-item" :aria-current="current ? 'page' : undefined">
    <span class="er-bottom-nav-icon">
      <!-- The icon. -->
      <slot />
      <span v-if="badge" class="er-bottom-nav-badge" aria-hidden="true">{{ badge }}</span>
    </span>
    <span class="er-bottom-nav-label">{{ label }}<span v-if="badge" class="er-bottom-nav-hidden">, {{ badge }} {{ badgeLabel }}</span></span>
  </component>
</template>
index.ts 4 lines
/** Bottom nav — a phone's tab bar: a few destinations along the bottom edge, each an icon and a word, with an optional count. */
export { default as BottomNav } from './BottomNav.vue'
export { default as BottomNavItem } from './BottomNavItem.vue'