Menu

The Menu component is a list of items arranged in a vertical, expandable list used for navigation within a dashboard. Each item can be clicked to show children, navigate to another page, or execute a function.

Items

Use the items prop to build your menu as a MenuItem[]. See the Interfaces section for a full list of options.

In this demo, each item will alert it's name when clicked.

<template>
  <ci-menu :items="items" />
</template>
<script>
export default {
  data() {
    return {
      items: [
        { icon: 'home', text: 'Home', onClick: this.showAlert('Home'), active: true},
        {
          icon: 'people-group',
          text: 'My Team',
          children: [
            { text: 'Overview', onClick: this.showAlert('Overview'), actions: [{ icon: 'person-pencil', name: 'new-team', onClick: this.showAlert('New Team'), constant: true }]},
            { text: 'Team 1', onClick: this.showAlert('Team 1')},
            { text: 'Team 2', onClick: this.showAlert('Team 2')},
            { text: 'Team 3', onClick: this.showAlert('Team 3')},
            { text: 'Team 4', onClick: this.showAlert('Team 4')}
          ]
        },
        { icon: 'globe-americas', text: 'Opportunities', onClick: this.showAlert('Opportunities') },
        {
          icon: 'task-list',
          text: 'Reports',
          children: [
            { text: 'Report 1', onClick: this.showAlert('Report 1'), actions: [{ icon: 'trash', name: 'delete', onClick: this.showAlert('delete') }] },
            { text: 'Report 2', onClick: this.showAlert('Report 2'), actions: [{ icon: 'trash', name: 'delete', onClick: this.showAlert('delete') }] },
            { text: 'Report 3', onClick: this.showAlert('Report 3'), actions: [{ icon: 'trash', name: 'delete', onClick: this.showAlert('delete') }] },
            { text: 'Report 4', onClick: this.showAlert('Report 4'), actions: [{ icon: 'trash', name: 'delete', onClick: this.showAlert('delete') }] }
          ]
        }
      ]
    };
  },
  methods: {
    showAlert(str) {
      return function() {
        alert(str)
      }
    },
  },
};
</script>

Collapsed

Use the collapsed prop to collapse your menu to just the icons. Children will be shown via Popovers instead of expanding.

In this demo, each item will link to a page in the documentation website when clicked. Here we're also demoing the same menu in a collapsed and expanded state, so the different interactions can be see.

<template>
  <DemoGrid>
    <ci-menu :items="items" />
    <ci-menu :items="items" collapsed />
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      items: [
        {
          icon: 'grid',
          text: 'Components',
          children: [
            { text: 'App Switcher', to: '/components/app-switcher.html' },
            { text: 'Avatar', to: '/components/avatar.html' },
            { text: 'Data Card', to: '/components/data-card.html' },
            { text: 'Dashboard Page', to: '/components/dashboard-page.html' },
            { text: 'Iconbar', to: '/components/iconbar.html' },
            { text: 'Menu', to: '/components/menu.html', active: true }
          ]
        },
        {
          icon: 'circle-i',
          text: 'Icons',
          to: '/components/icons',
        },
        {
          icon: 'star',
          text: 'CSS',
          children: [
            { text: 'Overview', to: '/css' },
            { text: 'Utils', to: '/css/utils' },
            { text: 'Vars', to: '/css/vars' },
          ]
        },
        {
          icon: 'task-list',
          text: 'Docs',
          children: [
            { text: 'Installation', to: '/docs' },
            { text: 'Contributing', to: '/docs/utils' },
            { text: 'Developing New Components', to: '/docs/developing-components' },
            { text: 'Frontend Standards', to: '/docs/frontend-standards' },
            { text: 'Local Development', to: '/docs/local-dev' },
            { text: 'Stratosphere Standards', to: '/docs/stratosphere-standards' },
          ]
        },
      ]
    };
  }
};
</script>

Events

There are several events at your disposal.

Event	Arguments	Description
@expand	The MenuItem that was expanded	Emitted whenever a menu item's children are expanded
@collapse	The MenuItem that was collapsed	Emitted whenever a menu item's children are collapsed
@item:click	The MenuItem or MenuItemChild object of the clicked item	Emitted whenever a menu item is clicked
@action:click	{item: MenuItemChild, action: MenuItemAction}	Emitted whenever an action is clicked

<template>
  <ci-menu
    :items="items"
    @expand="alertText('expand')"
    @collapse="alertText('collapse')"
    @item:click="alertItemText"
    @action:click="alertActionText"
  />
</template>
<script>
export default {
  data() {
    return {
      items: [
        { icon: 'home', text: 'Home', active: true},
        {
          icon: 'people-group',
          text: 'My Team',
          children: [
            { text: 'Team 1' },
            { text: 'Team 2' },
            { text: 'Team 3' },
            { text: 'Team 4' }
          ]
        },
        { icon: 'globe-americas', text: 'Opportunities' },
        {
          icon: 'task-list',
          text: 'Reports',
          children: [
            { text: 'Report 1', actions: [{ icon: 'trash', name: 'delete' }] },
            { text: 'Report 2', actions: [{ icon: 'trash', name: 'delete' }] },
            { text: 'Report 3', actions: [{ icon: 'trash', name: 'delete' }] },
            { text: 'Report 4', actions: [{ icon: 'trash', name: 'delete' }] }
          ]
        }
      ]
    };
  },
  methods: {
    alertItemText(item) {
      alert(item.text);
    },
    alertText(string) {
      alert(string);
    },
    alertActionText(obj) {
      alert(`${obj.action.name}: ${obj.item.text}`);
    },
  },
};
</script>

Interfaces

MenuItem Interface

Each MenuItem can have the following properties. You cannot combine to, onClick and children and must choose only one for each item.

Property	Type	Description	Required
icon	String	The icon to render	true
text	String	The text for the menu item	true
to	Route|string	A route to navigate to when clicked. Cannot be combined with onCLick or children	false
onClick	Function	The function to execute when clicked. Cannot be combined with to or children	false
children	MenuItemChild[]	Child items to render in a popover or accordion. Cannot be combined with to or onCLick	false
active	Boolean	Whether the item is active or not. If your app uses vue-router, this will be handled automatically	false
childMenuExpanded	Boolean	Whether the item's child menu is open or not	false

MenuItemChild Interface

Each MenuItem can have the following properties. Unlike MenuItem's they cannot have an icon or children but can have actions.

Property	Type	Description	Required
text	String	The text for the menu item	true
to	Route|string	A route to navigate to when clicked. Cannot be combined with onCLick	false
onClick	Function	The function to execute when clicked. Cannot be combined with to	false
actions	MenuItemAction[]	Actions to render on the right side of the item	false
active	Boolean	Whether the item is active or not. If your app uses vue-router, this will be handled automatically	false

MenuItemAction Interface

Each MenuItemAction can have the following properties. Actions render as icons that execute a function when clicked.

Property	Type	Description	Required
text	String	The text for the menu item	true
to	Route|string	A route to navigate to when clicked. Cannot be combined with onCLick	false
onClick	Function	The function to execute when clicked. Cannot be combined with to	false
actions	MenuItemAction[]	Actions to render on the right side of the item	false
active	Boolean	Whether the item is active or not. If your app uses vue-router, this will be handled automatically	false