@acodez/menu

navigation menu

Usage no npm install needed!

<script type="module">
  import acodezMenu from 'https://cdn.skypack.dev/@acodez/menu';
</script>

README

@acodez/menu

npm_version license

React menu component with dark & light theme, and more customizations.

Installation

npm install @acodez/menu

Props API

Property Type Required Description
theme string no nav theme dark or light
direction string no nav item alignment vertical or horizontal
border string no nav item divider blank or divider
hoverStyle string no nav item hover style button or plain
link string yes menu link
label string no menu label
imageSrc string no icon image src
corner string no item border radius, square or round

Usage

import NavList from "@acodez/menu";
      
<NavList theme="dark" direction="horizontal" border="divider" hoverStyle="button"
    items={[
    {
        link: "/link1", // link
        label: "Dashboard", // text
        imageSrc: ItemIcon, // icon src - url
        corner: "round", // border radius
    },
    {
        link: "/link2",
        label: "Students",
        imageSrc: ItemIcon,
    },
    {
        link: "/link3",
        label: "Exams",
        imageSrc: ItemIcon,
    },
    {
        link: "/link4",
        label: "Settings",
        imageSrc: ItemIcon,
    },
    ]}
/>