@pavel-yakovlev/drawer-navigation-web-component

1.0.2 • Public • Published

drawerNavigation


This is an implementation of a drawer navigation inspired by Karan Sahah's Navigation Drawer Concept. This library created as a Web Component, so you can easily get started using it, just include tag in your HTML-markup.

Css variables

You can easily change the appearance of the component through CSS variables. Put them on the tag in your CSS. For example:

HTML:

<drawer-navigation id="navigation">
    <a href="#">Menu item 1</a>
    <a href="#">Menu item 2</a>
    <a href="#">Menu item 3</a>
</drawer-navigation>

CSS:

#navigation {
  --font-color: "yellow";
  --menu-color-primary: #c0b0e5;
}

List of all CSS variables

...via which you can change the appearance of this component

CSS variable Meaning
--font-color color of the font and images
--font-size font size
--menu-color-primary primary color of the component
--menu-color-secondary secondary color of the component
--scrollbar-hover-color color of the scrollbar on hover
--handle-svg-color color of the svg image in the handle
--handle-svg-dimension dimensions of the handle in px
--default-z-index z-index that the component will use (default is 1)

Note

All elements that placed inside the will have some additional styles. You can rewrite them in your CSS if you like.

Package Sidebar

Install

npm i @pavel-yakovlev/drawer-navigation-web-component

Weekly Downloads

1

Version

1.0.2

License

ISC

Unpacked Size

12 kB

Total Files

3

Last publish

Collaborators

  • pavel-yakovlev