MenuLink

Component

Storybook

Figma Demo

Guidelines

Variations

There are three instances of the MenuLink:

• default
• unread
• read

MenuLinks will have a title at a minimum. They may also have a leading icon and subtitle to provide more context on where the link will go. MenuLinks fill the width of their parent container.

Usage

• Use the MenuLink when you need link behavior with the prominence and styling of a button.
• The default variant is used for basic navigation, such as links within the side menu or a flyout menu.
• The unread and read variants are used to represent messages in the notifications dropdown.

Accessibility

Ensure that the MenuLink is easily navigable with keyboard controls and that it provides clear focus indicators.

Content

• A link’s label should set expectations about where it will take the user. Consider descriptive labels such as “View all invoices” instead of a more generic “View all.”
• If a link cannot be descriptive for some reason, additional context must exist so that users know where the link will take them.

Component Specs

API

• class: string | Default: undefined
  The class of the link.

• external: boolean | Default: false
  If the link should open in a new tab.

• href: string | Default: undefined
  The link to navigate to.

• iconName: typeof SvelteComponent | Default: undefined
  The icon of the link.

• subtitle: string | Default: undefined
  The subtitle of the link.

• testId: string | Default: undefined
  The test id of the link.

• title: string | Default: undefined
  The title of the link.

• variant: 'default' | 'read' | 'unread' | Default: 'default'
  The variant of the link.

Example

<script>
	import { MenuLink } from '@getprovi/craft-svelte';
	import { LiquorGlassBottleSolid } from '@getprovi/craft-svelte-icons';
</script>

<MenuLink
	href="/"
	iconName="{LiquorGlassBottleSolid}"
	title="Order History"
	subtitle="View & Track Orders"
/>

Types

interface Props
	extends Omit<ComponentProps<Link>, 'variant' | 'size' | 'dynamicSize' | 'disabled'> {
	external?: boolean;
	iconName?: typeof SvelteComponent | undefined;
	subtitle?: string | undefined;
	title?: string | undefined;
	variant?: 'default' | 'read' | 'unread';
}