ACV Menu

User interface element that provides a set of links or buttons to navigate through different sections or pages of a website or application.

Used as navigation on the main sections of the interface. It is typically organized in a hierarchical structure and can be presented in various formats such as horizontal bars, vertical lists, or dropdown menus. The primary purpose of a navigation menu is to help users find and access content quickly and efficiently.

Basic usage

Logotype

ITEM

ITEM WITH SECOND LINE, ITEM WITH SECOND LINE, ITEM WITH SECOND LINE

Group title

Disabled subitem

Subitem with ellipsis with ellipsis with ellipsis

Subitem with second line of text

Subitem with tag

5

Subitem with small tag

NEW

Item 2.3

Profile

Help

Collapse menu

Source code

<script setup>
  import AcvMenu from '@/components/menu/menu.vue';
  import AcvMenuGroup from '@/components/menu-group/menuGroup.vue';
  import AcvMenuItem from '@/components/menu-item/menuItem.vue';
  import AcvTag from '@/components/tag/tag.vue';
  import { IconALogo32 } from '@acronis-platform/icons/a';
  import { IconInfo16 } from '@acronis-platform/icons/info';
  import { IconPlaceholder16 } from '@acronis-platform/icons/placeholder';
  import { ref } from 'vue';

  const menuIsCollapsed = ref(false);
  const selectedMenu = ref(null);
  function toggleCollapse() {
    menuIsCollapsed.value = !menuIsCollapsed.value;
  }
</script>

<template>
  <AcvMenu
    id="menu-0"
    v-model="selectedMenu"
    :collapse="menuIsCollapsed"
  >
    <template #prepend>
      <AcvMenuItem :icon="IconALogo32">
        Logotype
      </AcvMenuItem>
    </template>
    <AcvMenuItem
      id="item-0-0"
      :icon="IconPlaceholder16"
    >
      ITEM
    </AcvMenuItem>
    <AcvMenuItem
      id="item-0-0"
      :icon="IconPlaceholder16"
      :clamp="2"
    >
      ITEM WITH SECOND LINE, ITEM WITH SECOND LINE, ITEM WITH SECOND LINE
    </AcvMenuItem>
    <AcvMenuGroup
      id="menu-0-1"
      title="Group title"
    >
      <AcvMenuItem
        id="item-1.0"
        :icon="IconPlaceholder16"
        disabled
      >
        Disabled subitem
      </AcvMenuItem>
      <AcvMenuItem
        id="item-1.1"
        :icon="IconInfo16"
      >
        Subitem with ellipsis with ellipsis with ellipsis
      </AcvMenuItem>
      <AcvMenuItem
        id="item-1.2"
        clamp
      >
        Subitem with second line of text
      </AcvMenuItem>

      <AcvMenuGroup id="menu-1-0">
        <AcvMenuItem id="item-2.0">
          Subitem with tag
          <template #append>
            <AcvTag>
              5
            </AcvTag>
          </template>
        </AcvMenuItem>
        <AcvMenuItem id="item-2.1">
          Subitem with small tag
          <template #append>
            <AcvTag small>
              NEW
            </AcvTag>
          </template>
        </AcvMenuItem>
        <AcvMenuItem id="item-2.2">
          Item 2.3
        </AcvMenuItem>
      </AcvMenuGroup>
    </AcvMenuGroup>

    <template #append>
      <AcvMenuItem
        id="profile"
        :icon="IconPlaceholder16"
      >
        Profile
      </AcvMenuItem>
      <AcvMenuItem
        id="help"
        :icon="IconPlaceholder16"
      >
        Help
      </AcvMenuItem>
      <AcvMenuItem
        id="collapse"
        :icon="IconPlaceholder16"
        @click="toggleCollapse"
      >
        Collapse menu
      </AcvMenuItem>
    </template>
  </AcvMenu>
</template>

Menu types

Primary

Elements of the first level of navigation may contain a second level of navigation. The second level of navigation is opened by clicking on the parent element. By default, the first element of the second navigation level will always be active.

Overview

Business Management

ProtectionProtectionProtection

Other services

Company management

Secondary

Used to access subsections within the parent section. The link should clearly describe the action and give an unambiguous understanding of the subsection to which the user will go. If the links do not fit in the same screen, additional navigation appears in the right as arrows with the possibility of horizontal scrolling

FIRST

SECOND

THIRD

5

FOURTH

Tertiary

Used to access subsections within the parent section. The link should clearly describe the action and give an unambiguous understanding of the subsection to which the user will go. If the links do not fit in the same screen, additional navigation appears in the right as arrows with the possibility of horizontal scrolling

HEADER

First item

Second item

Third item

5

Fourth item

Fifth item

Grouping

Use <acv-menu-group /> to group items inner a submenu.

Test logo

ITEM

ITEM WITH SECOND LINE, ITEM WITH SECOND LINE, ITEM WITH SECOND LINE

Profile

Help

Collapse menu

Disabled items

Use disabled attribute to disable an acv-menu-item.

Test logo

ITEM

Disabled subitem

Subitem with ellipsis with ellipsis with ellipsis

Subitem with second line of text

Select active menu item

Menu supports v-model as the binding index of currently active menu. Use model bindings to control menu selection.

Accessibility

Provided AcvMenu component must adapt to the list of WAI-ARIA accessibility patterns.

Keyboard Interaction

• When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item.
• When a menu item receives focus, the user can:
  • Navigate to the next item with the Tab key.
  • Navigate to the previous item with the Tab + Shift key.
  • Open a submenu with the Right Arrow key.
  • Close a submenu with the Left Arrow key.
  • Close the menu with the Escape key.
  • Activate/select a menu item with the Enter key.

Props

Prop name	Description	Type	Values	Default
type	Type of the Menu	"primary" | "secondary" | "tertiary"	'primary', 'secondary', 'tertiary'	'primary'
modelValue	Selected menu item	string | number	-
defaultActive	Menu items	string	-
defaultOpened	Menu items	Array	-
collapse	Whether the Menu is collapsible	boolean	-	false
scrollIntoExpand	Whether the Menu is expandable	boolean	-	false
uniqueOpened	Whether unique opened items are enabled	boolean	-	true
router	Whether the router is enabled	boolean	-	false
background	Background color	string	'primary', 'secondary', 'tertiary', 'nav-primary'
hideBottomBorder	Whether bottom border is hidden	boolean	-
hideBorders	Whether borders are hidden	boolean	-
height	Height of the Menu	string	-
mode		-	-	'vertical'

Events

Event name	Properties	Description
update:modelValue	eventName string - The name of the event item string - The selected menu item	Triggered when the selected menu item changes
select
open
close

Slots

Name	Description	Bindings
prepend
default
append