Sub Menu | Stratosphere

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. If your app uses vue-router, this will be handled automatically	`true`

← Steps Table →

# Sub Menu