React Side Menu

A responsive, iconographic side menu bar for React web apps

Large (width 1360px+):

Medium (width 768px - 1359px)

Mobile (width less than 768px)

Usage

• Import your icon components, and the SideMenu component, into your React app:

// import the top-level SideMenu directory for a cleaner import
import SideMenu from 'path/to/SideMenu'
import { MdAddCircle, MdStar, MdPerson } from 'react-icons/md'

• Build an array of objects for your menu

(Note: The hr: true object is a horizonal line between menu items)

const menu = [
    {
        icon: MdAddCircle,
        text: "New",
        link: "/new"
    },
    {
        icon: MdStar,
        text: "Favorites",
        link: "/favorites"
    },
    {
        hr: true
    },
    {
        icon: MdPerson,
        text: "Agent",
        link: "/agent"
    },
]

• Pass your menu array to the menu prop when rendering/returning your JSX

<SideMenu menu={menu} />

Props

property	type	description
menu	array[object]	array of menu item objects (see below)

Menu item object

Each object inside the menu prop's array requires EITHER:

property	type	description
icon	React component	the bare react-icons component for your icon of choice
text	string	the text label for menu item
link	string	the navigable URL for the link

OR

property	type	description
hr	boolean	if true, this spot in the menu will display a horizonal separator line

CONTRIBUTING

See CONTRIBUTING