j-Drawer

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

if {String} condition, it's compared with the value within of path
align {String} alignment (default: left)
NEW: width {Number} a default width (default: 250)
NEW: widthlg {Number} optional, width for large displays
NEW: widthmd {Number} optional, width for medium displays
NEW: widthsm {Number} optional, width for small displays
NEW: widthxs {Number} optional, width for extra small displays

Use it with <ui-component name="drawer">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<ui-component name="drawer" path="common.menu" config="if:main;align:left" class="hidden">
	<button><i class="ti ti-inbox"></i>Inbox</button>
	<button class="selected"><i class="ti ti-star"></i>Starred</button>
	<button><i class="ti ti-envelope"></i>Send mail</button>
	<hr />
	<a href="#"><i class="ti ti-trash"></i>Trash</a>
</ui-component>

<script>
	var common = { menu: 'main' };
</script>