Tab MenuReady

Tab Menu is a navigational menu designed to display a list of links with customizable labels.

Open in new window
View RTL
<script setup lang="ts">
const items = ref([
  {
    href: '#',
    label: 'Overview',
  },
  {
    href: 'https://provetcloud.design/',
    external: true,
    label: 'Provet Cloud',
  },
  {
    href: 'https://nordhealth.design/',
    external: true,
    label: 'Nordhealth Design',
    target: '_blank',
  },
])
</script>

<template>
  <TabMenu :items />
</template>

Usage

This section includes guidelines for designers and developers about the usage of this pattern in different contexts.

Do

  • Use short and easily scannable labels for navigation items.
  • Use links to navigate between pages or to external destinations.
  • Ensure link text is descriptive and meaningful on its own.

Don’t

  • Avoid using long labels, truncated text negatively impacts usability.
  • Don’t use links to perform actions like save, add, or edit. Use a button for such actions instead.
  • Avoid generic phrases like “read more“ or “click here” that lack context and clarity.

Content guidelines

When writing tab labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

My tasks
My Tasks

Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:

Dashboard
The dashboard

Avoid ending tab labels in punctuation:

Patients
Patients.

Use as few words as possible to describe each tab label:

Payments
Payments in your clinic

Avoid all caps for tab labels:

Dashboard
DASHBOARD

Integration

This product pattern is currently only available to use in the New Frontend for Provet Cloud (using Vue & Nuxt).


Troubleshooting

If you experience any issues while using this pattern, please ask for support in the #vet-frontend Slack channel.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.

 
Edit page