@unc-dsi/unc-vertical-menu NPM

<unc-vertical-menu>

<unc-vertical-menu> is useful for menu bar.

<unc-vertical-menu>
    <unc-menu-item href="/search" icon="search" label="Search" selected></unc-menu-item>
    <unc-menu-separator></unc-menu-separator>
    <unc-menu-item href="/users" icon="social:people" label="Users"></unc-menu-item>
</unc-vertical-menu>

Dependencies

Name	NPM	Usage
<iron-icons>		To display icons

Events

Name	Description
select	Fire when the selection changed. Contains index and label of the current selected item: {detail: {index, label }}

Styling

Name	Default Lumo value	Default value	Description
--unc-menu-item-icon-size	--lumo-icon-size-m	24px	Icon size
--unc-menu-item-vertical-padding	--lumo-space-s	0.5rem	Padding top and bottom around each menu item
--unc-menu-item-selected-bgcolor	--lumo-contrast-20pct	hsla(214, 53%, 23%, 0.16)	Background color of the selected item
--unc-menu-item-selected-fgcolor	--lumo-primary-color	hsl(214, 90%, 52%)	Color of the icon for the selected item
--unc-menu-item-hover-bgcolor	--lumo-contrast-10pct	hsla(214, 53%, 23%, 0.16)	Foreground color when hovering an item