Navbar Menu
Explore the Navbar menu of Nubra UI.
Basic example
Add data-layout="navbar" data-layout-style="default" in wrapper class and use below snippet Horizontal light menu.
import React, { useState } from 'react'
import { Container, Nav } from 'react-bootstrap'
import SimpleBar from 'simplebar-react'
import { navigationConfig } from './navigationConfig'
import NubraBadge from '../../../../components/@nubra-badge/@nubra-badge'
//Image
import avatar12 from '../../../../Assets/dist/img/avatar12.jpg'
const BasicExample = () => {
const [activeMenu, setActiveMenu] = useState();
const handleClick = (menuName) => {
setActiveMenu(menuName);
}
return (
<nav className="hk-navbar navbar navbar-expand-xl navbar-light position-relative start-0 top-0">
<Container fluid>
<div className="nav-start-wrap flex-fill">
<div className="menu-header">
<span className="d-flex align-items-center">
<span className="d-flex navbar-brand me-2">
Brand
</span>
</span>
</div>
<div className="hk-menu hk-menu-navbar-example position-relative start-0 top-0 border-0">
<SimpleBar className="nicescroll-bar">
<div className="menu-content-wrap">
<Container fluid className="menu-group">
<Nav as="ul" className="navbar-nav flex-column">
{
MenuList.map((routes, index) => (
<React.Fragment key={index} >
{
routes.contents.map((menus, ind) => (
// <Nav.Item as='li' key={ind} className={classNames({ "active": useRouteMatch(menus.path) })} >
<Nav.Item as='li' key={ind} >
<Nav.Link data-bs-toggle="collapse" data-bs-target={`#${menus.id}`}>
<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 as={Link} to="#" className="nav-link" data-bs-toggle="collapse" data-bs-target={`#${subMenu.id}`}>
<span className="nav-link-text">
{subMenu.name}
</span>
</Nav.Link>
<ul id={subMenu.id} className="nav flex-column collapse nav-children">
<li className="nav-item">
<ul className="nav flex-column">
{subMenu.childrens.map((childrenPath, i) => (
<li className="nav-item" key={i}>
<Nav.Link as={Link} to={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 as={Link} to={subMenu.path} onClick={handleClick}>
<span className="nav-link-text">
{subMenu.name}
</span>
</Nav.Link>
</li>
))}
</ul>
</li>
</ul>
</Nav.Item>
))
}
</React.Fragment>
))
}
</Nav>
</Container>
</div>
</SimpleBar>
</div>
</div>
<div className="nav-end-wrap">
<Nav className="navbar-nav flex-row">
<Nav.Item>
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<span className="icon">
<span className="feather-icon">
<Icons.Moon />
</span>
</span>
</Link>
</Nav.Item>
<Nav.Item>
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<span className="icon">
<span className=" position-relative">
<span className="feather-icon">
<Icons.Inbox />
</span>
<NubraBadge bg="primary" size="sm" soft pill className="position-top-end-overflow-1" >4</NubraBadge>
</span>
</span>
</Link>
</Nav.Item>
<Nav.Item>
<Dropdown className="ps-2">
<Dropdown.Toggle as={Link} to="#" className="no-caret">
<div className="avatar avatar-rounded avatar-sm">
<img src={avatar12} alt="user" className="avatar-img" />
</div>
</Dropdown.Toggle>
</Dropdown>
</Nav.Item>
</Nav>
</div>
</Container>
</nav>
)
}
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="horizontal" data-layout-style="default" data-menu="dark" in wrapper class and use below snippet Horizontal dark menu.
import React, { useState } from 'react'
import { Container, Nav } from 'react-bootstrap'
import SimpleBar from 'simplebar-react'
import { navigationConfig } from './navigationConfig'
import NubraBadge from '../../../../components/@nubra-badge/@nubra-badge'
//Image
import avatar12 from '../../../../Assets/dist/img/avatar12.jpg'
const DarkMenu = () => {
const [activeMenu, setActiveMenu] = useState();
const handleClick = (menuName) => {
setActiveMenu(menuName);
}
return (
<nav className="hk-navbar navbar navbar-expand-xl navbar-dark position-relative start-0 top-0">
<Container fluid>
<div className="nav-start-wrap flex-fill">
<div className="menu-header">
<span className="d-flex align-items-center">
<span className="d-flex navbar-brand me-2">
Brand
</span>
</span>
</div>
<div className="hk-menu hk-menu-navbar-example position-relative start-0 top-0 border-0">
<SimpleBar className="nicescroll-bar">
<div className="menu-content-wrap">
<Container fluid className="menu-group">
<Nav as="ul" className="navbar-nav flex-column">
{
MenuList.map((routes, index) => (
<React.Fragment key={index} >
{
routes.contents.map((menus, ind) => (
// <Nav.Item as='li' key={ind} className={classNames({ "active": useRouteMatch(menus.path) })} >
<Nav.Item as='li' key={ind} >
<Nav.Link data-bs-toggle="collapse" data-bs-target={`#${menus.id}`}>
<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 as={Link} to="#" className="nav-link" data-bs-toggle="collapse" data-bs-target={`#${subMenu.id}`}>
<span className="nav-link-text">
{subMenu.name}
</span>
</Nav.Link>
<ul id={subMenu.id} className="nav flex-column collapse nav-children">
<li className="nav-item">
<ul className="nav flex-column">
{subMenu.childrens.map((childrenPath, i) => (
<li className="nav-item" key={i}>
<Nav.Link as={Link} to={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 as={Link} to={subMenu.path} onClick={handleClick}>
<span className="nav-link-text">
{subMenu.name}
</span>
</Nav.Link>
</li>
))}
</ul>
</li>
</ul>
</Nav.Item>
))
}
</React.Fragment>
))
}
</Nav>
</Container>
</div>
</SimpleBar>
</div>
</div>
<div className="nav-end-wrap">
<Nav className="navbar-nav flex-row">
<Nav.Item>
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<span className="icon">
<span className="feather-icon">
<Icons.Moon />
</span>
</span>
</Link>
</Nav.Item>
<Nav.Item>
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<span className="icon">
<span className=" position-relative">
<span className="feather-icon">
<Icons.Inbox />
</span>
<NubraBadge bg="primary" size="sm" soft pill className="position-top-end-overflow-1" >4</NubraBadge>
</span>
</span>
</Link>
</Nav.Item>
<Nav.Item>
<Dropdown className="ps-2">
<Dropdown.Toggle as={Link} to="#" className="no-caret">
<div className="avatar avatar-rounded avatar-sm">
<img src={avatar12} alt="user" className="avatar-img" />
</div>
</Dropdown.Toggle>
</Dropdown>
</Nav.Item>
</Nav>
</div>
</Container>
</nav>
)
}
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.