Tab MenuReady
Tab Menu is a navigational menu designed to display a list of links with customizable labels.
<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, oredit. 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):
Avoid unnecessary words and articles in tab labels, such as “the”, “an” or “a”:
Avoid ending tab labels in punctuation:
Use as few words as possible to describe each tab label:
Avoid all caps for tab labels:
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.