Toolbar
Toolbar allows you to stack navigation links in a block.
Basic example
Check the basic example of toolbars. Using the wrapper class of .hk-toolbar.
import React from 'react';
import { Col, Container, Nav, Row } from 'react-bootstrap'
import NubraTooltip from '../../../components/@nubra-tooltip/NubraTooltip'
import * as Icons from 'react-feather'
import { Link } from 'react-router-dom'
const BasicToolbar = () => {
return (
<Row>
<Col sm={4}>
<div className="hk-toolbar border pa-10 mb-3">
<Nav className="nav-light">
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Dark Mode" >
<span className="icon">
<span className="feather-icon">
<Icons.Moon />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Setting" >
<span className="icon">
<span className="feather-icon">
<Icons.Settings />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Archive" >
<span className="icon">
<span className="feather-icon">
<Icons.Archive />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Help" >
<span className="icon">
<span className="feather-icon">
<Icons.CheckSquare />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
</Nav>
</div>
</Col>
<Col sm={4}>
<div className="hk-toolbar border pa-10 mb-3">
<Nav className="nav-light">
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Dark Mode" >
<span className="icon">
<span className="feather-icon">
<Icons.Moon />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Setting" >
<span className="icon">
<span className="feather-icon">
<Icons.Settings />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Archive" >
<span className="icon">
<span className="feather-icon">
<Icons.Archive />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
</Nav>
</div>
</Col>
</Row>
);
};
export default BasicToolbar;
<!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.
<!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.
Toolbar asymmetric
Add class .toolbar-asymmetric with .hk-toolbar for asymmetric toolbar.
import React from 'react';
import { Col, Container, Nav, Row } from 'react-bootstrap'
import NubraTooltip from '../../../components/@nubra-tooltip/NubraTooltip'
import * as Icons from 'react-feather'
import { Link } from 'react-router-dom'
const BasicToolbar = () => {
return (
<Row>
<Col sm={4}>
<div className="hk-toolbar toolbar-asymmetric border pa-10 mb-3">
<Nav className="nav-light">
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Dark Mode" >
<span className="icon">
<span className="feather-icon">
<Icons.Moon />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Setting" >
<span className="icon">
<span className="feather-icon">
<Icons.Settings />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
</Nav>
<Nav className="nav-light">
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Archive" >
<span className="icon">
<span className="feather-icon">
<Icons.Archive />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Help" >
<span className="icon">
<span className="feather-icon">
<Icons.CheckSquare />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
</Nav>
</div>
</Col>
<Col sm={4}>
<div className="hk-toolbar toolbar-asymmetric border pa-10 mb-3">
<Nav className="nav-light">
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Dark Mode" >
<span className="icon">
<span className="feather-icon">
<Icons.Moon />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Setting" >
<span className="icon">
<span className="feather-icon">
<Icons.Settings />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
</Nav>
<Nav className="nav-light">
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Help" >
<span className="icon">
<span className="feather-icon">
<Icons.CheckSquare />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
</Nav>
</div>
</Col>
<div className="col-sm-4">
<div className="hk-toolbar toolbar-asymmetric border pa-10 mb-3">
<Nav className="nav-light">
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Dark Mode" >
<span className="icon">
<span className="feather-icon">
<Icons.Moon />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
</Nav>
<Nav className="nav-light">
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Help" >
<span className="icon">
<span className="feather-icon">
<Icons.CheckSquare />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
<Nav.Item className="nav-link">
<Link to="#" className="btn btn-icon btn-rounded btn-flush-dark flush-soft-hover">
<NubraTooltip placement="top" title="Setting" >
<span className="icon">
<span className="feather-icon">
<Icons.Settings />
</span>
</span>
</NubraTooltip>
</Link>
</Nav.Item>
</Nav>
</div>
</div>
</Row>
);
};
export default BasicToolbar;
<!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.
<!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.