React Multilevel Navbar

A component that provides a nice-looking multilevel menu bar for your website. It is responsive and also navigable with the focus/tab key.

Check a live example!

Installation

npm i react-multilevel-navbar

import ReactMultiLevelNavbar from 'react-multilevel-navbar';

Props

These are the props you can pass to the component:

Name	Type	Default	Required
model	object	model	yes
custom_width	string	100%	no
custom_padding	string	1.5rem	no
custom_fontFamily	string	Raleway, sans-serif	no
mobile_breakpoint	number (in pixels)	645	no
custom_colors	object	Custom Colors	no

Model

The taxonomy model must follow this structure:

const model = {

    ['Level 1'] : {
        ['Sublevel 1-1'] : '#',
        ['Sublevel 1-2'] : '#'
    },

    ['Level 2'] : {
        ['Sublevel 2-1']: {
            ['Sublevel 2-1-1']: '#'
        },
        ['Level 2-2'] : {
            ['Level 2-2-1'] : '#'
        }
    }
	//etc...
	
}

There is no limit in nesting levels

Custom colors

The custom_colors prop must be an object of strings, where you specify the property that you want to change. These are the default values:

props.custom_colors = {
	background_color: 'rgb(240, 238, 238)',
	expand_color: 'rgb(255, 190, 190)',
	hover_color: 'black',
	contrast_color: 'white'
}

You do not need to fill the entire object with all the properties, just set the desired ones.