Funkwhale UI

Appearance

ts
import Nav from "@ui/Nav.vue"

Nav ​

A group of links (such as a table of contents or a navigation bar) or tabs.

You can add a badge or an icon to each tab link.

Tabs ​

Choose a unique tabQueryField to enable tabbing functionality. It allows users to reload or share the page without losing the active tab state. See the example below to learn how to make your tabbed interfaces accessible.

If you do not include the tabQueryField, you are limited to one Nav per page, and changing to another tab will reload the whole page.

Adding multiple tab regions to one page

If you add several tabbed regions into your page, make sure they have distinct queryField values so that they operate independently. In some cases you may want to use the same queryField, for example in a documentation where users can switch between yarn and npm and you have several code blocks that would all switch between the two options in a synchronized way.

You can even persist these choices across pages by telling Vue RouterLinks to preserve the corresponding route parameter.

A badge strongly urges the user to take a destructive or maintenance action. Only use when all of the following criteria are met:

  1. A maintenance problem calls for immediate action
  2. The button or link is the fastest way to get there
  3. The user needs to take a maintenance action to make the badge disappear

Typical example include:

  • A message inboxes where the primary feature is reading and archiving messages (in Funkwhale: User messages)
  • A moderation feature where reports need to be answered

Using this component

A11y Checklist ​

Accessible Nav ​

Tab content 1 (green)
ts
const tabs = ref([{
  title: "Tab A",
  badge: "secondary.raised.primary 1"
}, {
  title: "Tab B"
}, {
  title: "Tab C",
  badge: 3
}])
template
<Nav
  v-slot="{ tabpanels }"
  v-model="tabs"
  tab-query-field="tab"
>
  <div
    v-for="({ isActive, ...panel }, index) in tabpanels"
    v-show="isActive"
    v-bind="panel"
    :key="panel.key"
    :class="`solid ${['green', 'blue', 'purple'][index]}`"
  >
    Tab content {{ ['1 (green)', '2 (blue)', '3 (purple)'][index] }}
    <hr>
    <Toggle
      v-model="isOn[index]"
      :label="`Toggle ${index}`"
    />
  </div>
</Nav>

Test this component in isolation against WCAG2 criteria