Secondary Navigation

The secondary navigation is a flexible component which allows user to build custom sub navigation.

Usage

Secondary navigation by default is empty container. If items are needed items prop should be passed to component using SubMenuItem[] interface. See the Interfaces section for a full list of SubMenuItem options.

<template>
  <ci-secondary-navigation
    :items="items"
    title="Usage demo"
  />
</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  }
      ]
    }
  },
  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 or slot to give your secondary menu a title.

<template>
  <ci-secondary-navigation :items="items">
    <template #title>
      <b>Custom title</b>
    </template>
  </ci-secondary-navigation>
</template>
<script>
export default {
  data () {
    return {
      items: [
        { id: 'Latvia', text: 'Latvia', onClick: this.makeActive('Latvia'), active: true },
        { id: 'Lithuania', text: 'Lithuania', onClick: this.makeActive('Lithuania'), active: false },
        { id: 'Estonia', text: 'Estonia', onClick: this.makeActive('Estonia'), 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>

Bottom slot

Use the bottom slot to add content to bottom of secondary navigation.

<template>
  <ci-secondary-navigation :items="items">
    <template #title>
      <b>Custom title</b>
    </template>
    <template #bottom>
      <b>Public Beta</b>
    </template>
  </ci-secondary-navigation>
</template>
<script>
export default {
  data () {
    return {
      items: [
        { id: 'One', text: 'One', onClick: this.makeActive('One'), active: true },
        { id: 'Two', text: 'Two', onClick: this.makeActive('Two'), active: false },
        { id: 'Three', text: 'Three', onClick: this.makeActive('Three'), 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>

Variants

Use the variant slot to change style of component. Available variants are normal, dark and slate. Default is normal.

<template>
  <DemoGrid>
    <ci-secondary-navigation 
      :items="items"
      title="Normal"
    />
    <ci-secondary-navigation 
      :items="items"
      variant="slate"
      title="Slate"
    />
    <ci-secondary-navigation 
      :items="items"
      variant="dark"
      title="Dark"
    />
  </DemoGrid>

</template>
<script>
export default {
  data () {
    return {
      items: [
        { id: 'One', text: 'One', onClick: this.makeActive('One'), active: true },
        { id: 'Two', text: 'Two', onClick: this.makeActive('Two'), active: false },
        { id: 'Three', text: 'Three', onClick: this.makeActive('Three'), 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>

Organization info

Use the orgId and orgName props to set company info. Info is displayed inside bottom slot.

<template>
  <ci-secondary-navigation 
    :items="items"
    variant="dark"
    title="Org info"
    orgName="Test company"
    orgId="1234"
  />
</template>
<script>
export default {
  data () {
    return {
      items: [
        { id: 'One', text: 'One', onClick: this.makeActive('One'), active: true },
        { id: 'Two', text: 'Two', onClick: this.makeActive('Two'), active: false },
        { id: 'Three', text: 'Three', onClick: this.makeActive('Three'), 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>