CRS Side menu

Introduction

This is a web component that acts as a menu on the screen. It can be on the left or right side with panels that open on the left. These panels are containers for content.

The default position is right and is 100% height.

The default use without items looks like this.

<crs-side-menu caption="Side Tabs">
</crs-side-menu>

The caption is required as it is used for web accessibility.

If you want to use this on the left side of the parent element, add the class left to the component.

<crs-side-menu caption="Side Tabs" class="left">
</crs-side-menu>

Items

Adding items can be done using HTML in a template.
There are two types of items:

1. item
2. separator

<template>
    <item icon="global" caption="Actions">
        <div>
            <h2>Actions</h2>
        </div>
    </item>

    <separator></separator>
</template>

Looking at the item there are a couple of points to take note of:

1. Icon is the svg symbol name to use.
2. Caption is the text to display at the bottom of the image and also part of the accessibility.
3. The content of the element is what will be displayed when that item is selected