Package Exports

tjb-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tjb-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Webcomponents Main Menu.
Creating accessible and feature rich menus is a tedious task. So here is a re-useable webcomponent menu to make your development fun again.
It is accessible and mobile friendly by default and features sub-menus.

Example

https://tjb-webcomponents.github.io/tjb-menu/

Add to project

You might want to use a Polyfill for WebComponent:

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js"></script>

Include via HTML

Include it:

<script
  src="https://tjb-webcomponents.github.io/tjb-menu/tjb-menu.min.js"
  type="module"
></script>

Include via JavaScript

import 'https://tjb-webcomponents.github.io/tjb-menu/tjb-menu.min.js'

Include via NPM

Console:

npm i -S tjb-menu

Then in your code:

import 'tjb-menu';

Useage

Simplified:

<tjb-menu data-title="Main Menu">
  <span slot="logo">[YOUR LOGO]</span>

  <tjb-menu-item slot="menu-item">
    <a slot="menu-item-link">[YOUR LINK]</a>
  </tjb-menu-item>

  <tjb-menu-item-sub slot="menu-item">
    <div slot="menu-item-sub-toggle">[YOUR SUB-MENU TRIGGER]</div>

    <tjb-menu-item slot="menu-item">
      <a slot="menu-item-link">[YOUR SUB-MENU LINK]</a>
    </tjb-menu-item>
  </tjb-menu-item-sub>
</tjb-menu>

tjb-menu the parent
tjb-menu-item-sub a submenu
tjb-menu-item an item in the menu

Full example:

<tjb-menu data-title="Main Menu" class="tjb-menu">
  <span slot="logo"> My Company </span>

  <tjb-menu-item slot="menu-item">
    <a href="#/shop" class="tjb-menu-link" slot="menu-item-link"> shop </a>
  </tjb-menu-item>

  <tjb-menu-item slot="menu-item">
    <a href="#/contact" class="tjb-menu-link" slot="menu-item-link">
      contact
    </a>
  </tjb-menu-item>

  <tjb-menu-item-sub slot="menu-item">
    <svg role="img" aria-labelledby="title" slot="menu-item-sub-toggle">
      <title>select language</title>
      <use role="presentation" xlink:href="#icon-world" />
    </svg>

    <tjb-menu-item slot="menu-item">
      <a href="#/english" class="tjb-menu-link" slot="menu-item-link">
        English
      </a>
    </tjb-menu-item>

    <tjb-menu-item slot="menu-item">
      <a href="#/german" class="tjb-menu-link" slot="menu-item-link">
        German (Deutsch)
      </a>
    </tjb-menu-item>
  </tjb-menu-item-sub>

  <tjb-menu-item slot="menu-item">
    <a href="#/auth" class="tjb-menu-link" slot="menu-item-link"> login </a>
  </tjb-menu-item>

  <tjb-menu-item slot="menu-item">
    <a href="#/buy" class="tjb-menu-link" slot="menu-item-link"> buy now </a>
  </tjb-menu-item>
</tjb-menu>

Suggested global styling

:root {
  --c-primary: #3555f5;
}

.tjb-menu {
  --tjb-menu-sub-bg: white;
  --tjb-menu-sub-b: 1px solid rgba(100, 100, 100, 0.1);
  --tjb-menu-sub-c: black;
  --tjb-menu-toggler-color: black;
  --tjb-menu-toggler-hover: var(--c-primary);
  --tjb-menu-mobile-bg: white;
  --tjb-menu-mobile-c: black;
  background: white;
  color: black;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
  white-space: nowrap;
}

.tjb-menu-link {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px;
  display: inline-block;
}

.tjb-menu-link:focus,
.tjb-menu-link:hover,
.tjb-menu-link:active {
  fill: var(--primary);
  color: var(--primary);
}

tjb-menu