Classic Menu
Explore the classic vertical menu of Nubra UI.
Basic example
Add data-layout="vertical" data-layout-style="default" data-menu="light" in wrapper class and use below snippet classic light menu.
import React, { useState } from 'react'
import { Nav } from 'react-bootstrap'
import SimpleBar from 'simplebar-react'
import { navigationConfig } from './navigationConfig'
const BasicExample = () => {
const [activeMenu, setActiveMenu] = useState();
const handleClick = (menuName) => {
setActiveMenu(menuName);
}
return (
<>
<div className="hk-menu position-static">
<div className="menu-header">
<span>
<span className="d-flex navbar-brand">
Brand
</span>
</span>
</div>
<SimpleBar className="nicescroll-bar">
<div className="menu-content-wrap">
{navigationConfig.map((routes, index) => (
<React.Fragment key={index}>
<div className="menu-group" >
{routes.group && <div className="nav-header" >
<span>{routes.group}</span>
</div>}
{routes.contents.map((menus, idx) => (
<Nav bsPrefix='ul' className="navbar-nav flex-column" key={idx}>
<Nav.Item as='li' >
{
menus.childrens
&&
<>
<Nav.Link data-bs-toggle="collapse" data-bs-target="" aria-expanded={activeMenu === menus.name ? "true" : "false"} onClick={() => setActiveMenu(menus.name)} >
<span className={classNames("nav-icon-wrap", { "position-relative": menus.iconBadge })}>
{menus.iconBadge && menus.iconBadge}
<span className="svg-icon">
{menus.icon}
</span>
</span>
<span className={classNames("nav-link-text", { "position-relative": menus.badgeIndicator })} >
{menus.name}
{menus.badgeIndicator && menus.badgeIndicator}
</span>
{menus.badge && menus.badge}
</Nav.Link>
<ul id={menus.id} className={classNames("nav flex-column nav-children", { "collapse": activeMenu !== menus.name })}>
<li className="nav-item">
<ul className="nav flex-column">
{menus.childrens.map((subMenu, indx) => (
subMenu.childrens
?
<li className="nav-item" key={indx} >
<Nav.Link href={subMenu.path} className="nav-link" data-bs-toggle="collapse" data-bs-target={`#${subMenu.id}`}>
<span className="nav-link-text">
{subMenu.name}
</span>
</Nav.Link>
{subMenu.childrens.map((childrenPath, i) => (
<ul id={subMenu.id} className="nav flex-column collapse nav-children" key={i} >
<li className="nav-item">
<ul className="nav flex-column">
<li className="nav-item">
<Nav.Link href={childrenPath.path} onClick={handleClick}>
<span className="nav-link-text">
{childrenPath.name}
</span>
</Nav.Link>
</li>
</ul>
</li>
</ul>
))}
</li>
:
<li className="nav-item" key={indx}>
<Nav.Link href={subMenu.path} onClick={handleClick}>
<span className="nav-link-text">
{subMenu.name}
</span>
</Nav.Link>
</li>
))}
</ul>
</li>
</ul>
</>
}
</Nav.Item>
</Nav>
))}
</div>
<div className="menu-gap" />
</React.Fragment>
))}
</div>
</SimpleBar>
</div>
</>
)
}
export default BasicExample;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
import * as Icons from "react-feather";
import NubraBadge from "../../../../components/@nubra-badge/@nubra-badge";
const navigationConfig = [
{
group: '',
menu: [
{
id: 'nav_menu_id',
name: 'Navigation 1',
icon: <Icons.GitPullRequest />, //You can use any other icons
badge: <NubraBadge bg="pink" soft className="ms-2" >Trend</NubraBadge>,
path: 'nav_path',
submenu: []
},
]
}
]
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
Menu dark
Add data-layout="vertical" data-layout-style="default" data-menu="dark" in wrapper class and use below snippet classic dark menu.
import React, { useState } from 'react'
import { Nav } from 'react-bootstrap'
import SimpleBar from 'simplebar-react'
import classNames from 'classnames'
import { navigationConfig } from './navigationConfig'
const DarkMenu = () => {
const [activeMenu, setActiveMenu] = useState();
const handleClick = (menuName) => {
setActiveMenu(menuName);
}
return (
<>
<div className="hk-menu hk-menu-dark-example position-static">
<div className="menu-header">
<span>
<span className="d-flex navbar-brand">
Brand
</span>
</span>
</div>
<SimpleBar className="nicescroll-bar">
<div className="menu-content-wrap">
{navigationConfig.map((routes, index) => (
<React.Fragment key={index}>
<div className="menu-group" >
{routes.group && <div className="nav-header" >
<span>{routes.group}</span>
</div>}
{routes.contents.map((menus, idx) => (
<Nav bsPrefix='ul' className="navbar-nav flex-column" key={idx}>
<Nav.Item as='li' >
{
menus.childrens
&&
<>
<Nav.Link data-bs-toggle="collapse" data-bs-target="" aria-expanded={activeMenu === menus.name ? "true" : "false"} onClick={() => setActiveMenu(menus.name)} >
<span className={classNames("nav-icon-wrap", { "position-relative": menus.iconBadge })}>
{menus.iconBadge && menus.iconBadge}
<span className="svg-icon">
{menus.icon}
</span>
</span>
<span className={classNames("nav-link-text", { "position-relative": menus.badgeIndicator })} >
{menus.name}
{menus.badgeIndicator && menus.badgeIndicator}
</span>
{menus.badge && menus.badge}
</Nav.Link>
<ul id={menus.id} className={classNames("nav flex-column nav-children", { "collapse": activeMenu !== menus.name })}>
<li className="nav-item">
<ul className="nav flex-column">
{menus.childrens.map((subMenu, indx) => (
subMenu.childrens
?
<li className="nav-item" key={indx} >
<Nav.Link href={subMenu.path} className="nav-link" data-bs-toggle="collapse" data-bs-target={`#${subMenu.id}`}>
<span className="nav-link-text">
{subMenu.name}
</span>
</Nav.Link>
{subMenu.childrens.map((childrenPath, i) => (
<ul id={subMenu.id} className="nav flex-column collapse nav-children" key={i} >
<li className="nav-item">
<ul className="nav flex-column">
<li className="nav-item">
<Nav.Link href={childrenPath.path} onClick={handleClick}>
<span className="nav-link-text">
{childrenPath.name}
</span>
</Nav.Link>
</li>
</ul>
</li>
</ul>
))}
</li>
:
<li className="nav-item" key={indx}>
<Nav.Link href={subMenu.path} onClick={handleClick}>
<span className="nav-link-text">
{subMenu.name}
</span>
</Nav.Link>
</li>
))}
</ul>
</li>
</ul>
</>
}
</Nav.Item>
</Nav>
))}
</div>
<div className="menu-gap" />
</React.Fragment>
))}
</div>
</SimpleBar>
</div>
</>
)
}
export default DarkMenu;
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.
import * as Icons from "react-feather";
import NubraBadge from "../../../../components/@nubra-badge/@nubra-badge";
const navigationConfig = [
{
group: '',
menu: [
{
id: 'nav_menu_id',
name: 'Navigation 1',
icon: <Icons.GitPullRequest />, //You can use any other icons
badge: <NubraBadge bg="pink" soft className="ms-2" >Trend</NubraBadge>,
path: 'nav_path',
submenu: []
},
]
}
]
<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.