Horizontal Menu
Explore the horizontal menu of Nubra UI.
Basic example
Add data-layout="horizontal" data-layout-style="default" data-menu="light" in wrapper class and use below snippet Horizontal 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 hk-menu-horizontal-example position-relative top-0 start-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} >
<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>
</>
)
}
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 { Nav } from 'react-bootstrap'
import SimpleBar from 'simplebar-react'
import { navigationConfig } from './navigationConfig'
const DarkMenu = () => {
const [activeMenu, setActiveMenu] = useState();
const handleClick = (menuName) => {
setActiveMenu(menuName);
}
return (
<>
<div className="hk-menu hk-menu-horizontal-example hk-menu-dark-example position-relative top-0 start-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} >
<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>
</>
)
}
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.