We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

npm i @tryg/vue-ui-library

Usage

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

<template>
  <anchor-menu-item url="/dashboard">
    <span slot="text">Dashboard</span>
  </anchor-menu-item>
</template>

<script setup>
import { AnchorMenuItem } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-menu-item url="/dashboard">
    <span slot="text">Dashboard</span>
  </anchor-menu-item>
</template>

Icon slot

Here's an example of how to use the Menu-Item component with an icon on the left.

<template>
  <anchor-menu-item url="/dashboard">
    <anchor-icon slot="icon" name="alert-circle" size="medium"></anchor-icon>
    <span slot="text">Dashboard</span>
  </anchor-menu-item>
</template>

Compact

If using the "compact" version of Menu-Item, you should use a "small" size on icon component.

<template>
  <anchor-menu-item compact>
    <anchor-icon slot="icon" size="small"></anchor-icon>
    <span slot="text">Compact size</span>
  </anchor-menu-item>
</template>

Accessibility

• Renders as a native <a> element with configurable tabindex (via the tab-index prop, defaults to 0), making it reachable via keyboard Tab navigation.
• Keyboard support: Enter and Space activate the menu item when it has focus.
• When used inside a menu container, consider setting role="menu" on the parent and role="menuitem" on each menu item for proper menu semantics.
• When using an icon alongside text, the icon is decorative (aria-hidden="true") and the text slot provides the accessible name. For icon-only items, add an aria-label to describe the action.

API

anchor-menu-item

Properties

Events

CSS Custom Properties

Dependencies

Depends on

• anchor-icon

Graph

graph TD;
  anchor-menu-item --> anchor-icon
  style anchor-menu-item fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS