Wondering what’s next for npm?Check out our public roadmap! »

    @maksu/side-menu

    1.0.14 • Public • Published

    npm version Published on webcomponents.org

    side-menu

    Side-menu is a LitElement Web Component providing application navigation functionality withing the UI. It can be used for hierarchical or flat navigation.

    Live demo

    Supported features:
    1. Compact and normal modes
    2. Adding icons to the elements
    3. Multi level navigation

    Example of side-menu

    Installation

    Install 'side-menu' web component:

    npm i @maksu/side-menu --save

    After that you can import in an html file:

    <head>
        <script type="module">
            import '@maksu/side-menu/side-menu.js'
            import '@maksu/side-menu/side-menu-item.js'
        </script>
    </head>

    or in another LitElement:

    import {LitElement, html} from "lit-element";
    
    import '@maksu/side-menu/side-menu.js';
    import '@maksu/side-menu/side-menu-item.js';
    
    class ExampleElement extends LitElement {
      static get template() {
        return html`
            <side-menu>
                <side-menu-item label='Home' href='https://www.example.com'>
                </side-menu-item>
            </side-menu>
        `;
      }
    }
    
    customElements.define('example-element', ExampleElement);

    Examples

    Simple

    <side-menu>
        <side-menu-item label="Home" href="/home"></side-menu-item>
        <side-menu-item label="Accounts" href="/accounts"></side-menu-item>
        <side-menu-item label="Assignments" href="/assignments" target="_blank"></side-menu-item>
    </side-menu>

    Icon

    <side-menu>
       <side-menu-item label="Home" href="/home">
          <iron-icon icon="home" slot="icon"></iron-icon>
       </side-menu-item>
       <side-menu-item label="Accounts" href="/accounts">
          <iron-icon icon="account-circle" slot="icon"></iron-icon>
       </side-menu-item>
       <side-menu-item label="Assignments" href="/assignments" target="_blank">
          <iron-icon icon="assignment-turned-in" slot="icon"></iron-icon>
       </side-menu-item>
    </side-menu>

    Multi-level

    <side-menu>
       <side-menu-item label="Home">
          <iron-icon icon="home" slot="icon"></iron-icon>
       </side-menu-item>
       <side-menu-item label="Favorites" expanded>
          <iron-icon icon="favorite" slot="icon"></iron-icon>
          <side-menu-item label="Learn">
             <side-menu-item
                label="How to"
                href="/howto"
                target="_blank">        
             </side-menu-item>
          </side-menu-item>
          <side-menu-item
             label="Web Components"
             href="/webcomponents"
             target="_blank">
          </side-menu-item>
          <side-menu-item label="Guides" href="guides"></side-menu-item>
       </side-menu-item>
    </side-menu>

    Set item selected:

    You can set an item to be selected by adding a selected attribute to it

    <side-menu>
        <side-menu-item label="Home" selected></side-menu-item>
    </side-menu>

    Expand nested items:

    When you have a multi level menu, you can expand the child items by adding expanded attribute to the parent:

    <side-menu>
       <side-menu-item label="Parent" expanded>
          <side-menu-item label="Child"></side-menu-item>
       </side-menu-item>
    </side-menu>

    Running the demo locally

    1. Fork the 'side-menu' repository and clone it.
    2. Run 'npm-install' to install the dependencies.
    3. Run 'npm start' and the browser will automatically open the component demo.

    Install

    npm i @maksu/side-menu

    DownloadsWeekly Downloads

    26

    Version

    1.0.14

    License

    MIT

    Unpacked Size

    48.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar