Sub Menu

The Sub Menu component is a list of items arranged in a vertical list used for navigation within tabs or other places. Each item can be clicked to navigate to another page, or execute a function.

Items

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

<template>
  <ci-sub-menu :items="items" />
</template>
<script>
export default {
  data() {
    return {
      items: [
        { id: 'home', text: 'Home', onClick: this.makeActive('home'), active: true },
        { id: 'team', text: 'My Team', onClick: this.makeActive('team'), active: false },
        { id: 'opportunities', text: 'Opportunities', onClick: this.makeActive('opportunities'), active: false },
        { id: 'long-text', text: 'Lorem ipsum dolor sit amet consectetur alliquam', onClick: this.makeActive('long-text'), active: false }
      ]
    };
  },
  methods: {
    makeActive (itemId) {
      return () => {
        this.items.forEach(item => {
          item.active = false;
        });

        const item = this.items.find(u => u.id === itemId);
        item.active = true;
      }
    },
  },
};
</script>

Title

Use the title prop to set sub menu title.

<template>
  <ci-sub-menu
    title="Sub menu title"
    :items="items"
  />
</template>
<script>
export default {
  data() {
    return {
      items: [
        { text: 'First', onClick: this.showAlert('First'), active: true },
        { text: 'Second', onClick: this.showAlert('Second')},
        { text: 'Third', onClick: this.showAlert('Third') }
      ]
    };
  },
  methods: {
    showAlert(str) {
      return function() {
        alert(str)
      }
    },
  },
};
</script>

Icons

Use the icon property inside menu items to set icon for specific menu item.

<template>
  <ci-sub-menu
    title="Sub menu title"
    :items="items"
  />
</template>
<script>
export default {
  data() {
    return {
      items: [
        { text: 'One', onClick: this.showAlert('One'), active: true, icon: 'star' },
        { text: 'Two', onClick: this.showAlert('Two'), icon: 'book'},
        { text: 'Three', onClick: this.showAlert('Three'), icon: 'camera' }
      ]
    };
  },
  methods: {
    showAlert(str) {
      return function() {
        alert(str)
      }
    },
  },
};
</script>

Variants

Use the variant prop to change style of sub menu. By default normal variant is set.

<template>
  <DemoGrid layout="vertical" align="left">
    <ci-sub-menu
      title="Normal variant"
      :items="items"
    />
    <div style="background: #09265F;padding: 20px;">
      <ci-sub-menu
        title="Slate variant"
        :items="items"
        variant="slate"
      />
    </div>
  </DemoGrid>

</template>
<script>
export default {
  data() {
    return {
      items: [
        { text: 'Riga', onClick: this.showAlert('Riga'), active: true },
        { text: 'Vilnius', onClick: this.showAlert('Vilnius')},
        { text: 'Tallin', onClick: this.showAlert('Tallin') }
      ]
    };
  },
  methods: {
    showAlert(str) {
      return function() {
        alert(str)
      }
    },
  },
};
</script>

Fullwidth

Use the fullwidth prop to set sub menu to full width.

<template>
  <ci-sub-menu
    title="Sub menu title"
    :items="items"
    fullwidth
  />
</template>
<script>
export default {
  data() {
    return {
      items: [
        { text: 'One', onClick: this.showAlert('One'), active: true },
        { text: 'Two', onClick: this.showAlert('Two')},
        { text: 'Three', onClick: this.showAlert('Three') }
      ]
    };
  },
  methods: {
    showAlert(str) {
      return function() {
        alert(str)
      }
    },
  },
};
</script>

Events

Event	Arguments	Description
@item:click	The SubMenuItem object of the clicked item	Emitted whenever a menu item is clicked

Interfaces

SubMenuItem Interface

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

Property	Type	Description	Required
id	String	The unique id for the menu item	false
text	String	The text for the menu item	true
icon	String	The icon for the menu item	false
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
active	Boolean	Whether the item is active or not. By default if your app uses vue-router, this will be handled automatically	false