Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Base Nav

For light & Dark backgrounds use .nav-light, .nav-dark modifier classes. For alignments and vertical navigation please check official documentation.

Preview

Jsx

Active

Link

Disabled

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const BaseNav = () => {

  return (
        <Nav>
            <Nav.Item>
                <Nav.Link href="#">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-1">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default BaseNav;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Nav light

Use the .nav-light class with nav.

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const NavLight = () => {

  return (
        <Nav className="nav-light">
            <Nav.Item>
                <Nav.Link href="#">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-1">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default NavLight;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Nav dark

Use the .nav-dark class with nav.

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const NavDark = () => {

  return (
        <Nav className="nav-dark bg-dark p-2">
            <Nav.Item>
                <Nav.Link href="#">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-1">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default NavDark;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Horizontal alignment

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned. Centered with .justify-content-center,.justify-content-end

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const HorizontalNav = () => {

  return (
        <>
            <Nav className="nav-light justify-content-center" defaultActiveKey="active_key">
                <Nav.Item>
                    <Nav.Link eventKey="active_key">Active</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                    </NavDropdown>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="link-1">Link</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="disabled" disabled>
                        Disabled
                    </Nav.Link>
                </Nav.Item>
            </Nav>
            <div className="separator separator-light" />
            <Nav className="nav-light justify-content-end" defaultActiveKey="active_key">
                <Nav.Item>
                    <Nav.Link eventKey="active_key">Active</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                        <NavDropdown.Divider />
                        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                    </NavDropdown>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="link-1">Link</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link eventKey="disabled" disabled>
                        Disabled
                    </Nav.Link>
                </Nav.Item>
            </Nav>
        </>
  );
};

export default HorizontalNav;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Nav with icon

Use .nav-icon class with nav.

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'
import * as Icons from 'react-feather'

const NavWithIcons = () => {

  return (
        <Nav className="nav-icon nav-light">
            <Nav.Item>
                <Nav.Link eventKey="link-1">
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.CheckCircle />
                        </span>
                    </span>
                    <span className="nav-link-text">Active</span>
                </Nav.Link>
            </Nav.Item>
            <Dropdown as={Nav.Item}>
                <Dropdown.Toggle as={Nav.Link}>
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.FileText />
                        </span>
                    </span>
                    <span className="nav-link-text">Dropdown</span>
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    <Dropdown.Item>Action</Dropdown.Item>
                    <Dropdown.Item>Another action</Dropdown.Item>
                    <Dropdown.Item>Something else here</Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown.Item>Separated link</Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
            <Nav.Item>
                <Nav.Link eventKey="link-3">
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.Map />
                        </span>
                    </span>
                    <span className="nav-link-text">Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link disabled>
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.Package />
                        </span>
                    </span>
                    <span className="nav-link-text">Disabled</span>
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default NavWithIcons;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Nav with icon top

Use .nav-icon .nav-icon-top class with nav.

/static/media/icon-top.84d06b57444cbfa08bbd.md

Nav pills

Use .nav-pills class with nav and .nav-pills-rounded,.nav-pills-square for shape of pills.

Pills rounded

Pills square

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const NavPill = () => {

  return (
    <>
        <Nav variant="pills" className="nav-light mb-5" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>

        <div className="title"><span>Pills rounded</span></div>
        <Nav variant="pills" className="nav-light nav-pills-rounded mb-5" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>
        <div className="title"><span>Pills square</span></div>
        <Nav variant="pills" className="nav-light nav-pills-square mb-5" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>
    </>
  );
};

export default NavPill;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Nav pills icon

Use .nav-icon class with .nav-pills.

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const NavPillIcons = () => {

  return (
        <Nav variant="pills" className="nav-icon nav-light" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.CheckCircle />
                        </span>
                    </span>
                    <span className="nav-link-text">Active</span>
                </Nav.Link>
            </Nav.Item>
            <Dropdown as={Nav.Item}>
                <Dropdown.Toggle as={Nav.Link}>
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.FileText />
                        </span>
                    </span>
                    <span className="nav-link-text">Dropdown</span>
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    <Dropdown.Item>Action</Dropdown.Item>
                    <Dropdown.Item>Another action</Dropdown.Item>
                    <Dropdown.Item>Something else here</Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown.Item>Separated link</Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
            <Nav.Item>
                <Nav.Link eventKey="link-3">
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.Map />
                        </span>
                    </span>
                    <span className="nav-link-text">Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link disabled>
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.Package />
                        </span>
                    </span>
                    <span className="nav-link-text">Disabled</span>
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default NavPillIcons;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Nav pills icon top

Use .nav-icon .nav-icon-top class with nav.

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const PillIconsOnTop = () => {

  return (
        <Nav variant="pills" className="nav-icon nav-icon-top nav-light" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.CheckCircle />
                        </span>
                    </span>
                    <span className="nav-link-text">Active</span>
                </Nav.Link>
            </Nav.Item>
            <Dropdown as={Nav.Item}>
                <Dropdown.Toggle as={Nav.Link}>
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.FileText />
                        </span>
                    </span>
                    <span className="nav-link-text">Dropdown</span>
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    <Dropdown.Item>Action</Dropdown.Item>
                    <Dropdown.Item>Another action</Dropdown.Item>
                    <Dropdown.Item>Something else here</Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown.Item>Separated link</Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
            <Nav.Item>
                <Nav.Link eventKey="link-3">
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.Map />
                        </span>
                    </span>
                    <span className="nav-link-text">Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link disabled>
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.Package />
                        </span>
                    </span>
                    <span className="nav-link-text">Disabled</span>
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default PillIconsOnTop;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Nav pills soft

Use .nav-pills-soft class with nav.

/static/media/nav-pill-soft.5b1c9131294f9bc598e5.md

Nav line

Use .nav-line class with nav.

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const NavLine = () => {

  return (
        <Nav className="nav-light nav-line" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item eventKey="action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item eventKey="action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item eventKey="action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item eventKey="action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default NavLine;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Vertical

Stack your navigation by changing the flex item direction with the .flex-column utility or add .nav-vertical class. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const VerticalNav = () => {

  return (
        <Nav className="nav-light flex-column" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item eventKey="action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item eventKey="action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item eventKey="action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item eventKey="action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default VerticalNav;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Vertical nav pills

Add .nav-vertical class with .nav-pills.

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const VerticalNavPill = () => {

  return (
        <Nav variant="pills" className="nav-light nav-vertical nav-lig" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item eventKey="action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item eventKey="action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item eventKey="action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item eventKey="action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default VerticalNavPill;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Vertical nav line

Add .nav-vertical class with .nav-line.

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'

const VerticalNavLine = () => {

  return (
        <Nav className="nav-light nav-line nav-vertical nav-lig" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">Active</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                    <NavDropdown.Item eventKey="action/3.1">Action</NavDropdown.Item>
                    <NavDropdown.Item eventKey="action/3.2">Another action</NavDropdown.Item>
                    <NavDropdown.Item eventKey="action/3.3">Something</NavDropdown.Item>
                    <NavDropdown.Divider />
                    <NavDropdown.Item eventKey="action/3.4">Separated link</NavDropdown.Item>
                </NavDropdown>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">Link</Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="disabled" disabled>
                    Disabled
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default VerticalNavLine;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Vertical nav with icon

Add .nav-vertical class with .nav-pills.

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap'
import * as Icons from 'react-feather'

const VerticalNavWithIcon = () => {

  return (
        <Nav className="nav-icon nav-vertical nav-light" defaultActiveKey="link-1">
            <Nav.Item>
                <Nav.Link eventKey="link-1">
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.CheckCircle />
                        </span>
                    </span>
                    <span className="nav-link-text">Active</span>
                </Nav.Link>
            </Nav.Item>
            <Dropdown as={Nav.Item}>
                <Dropdown.Toggle as={Nav.Link}>
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.FileText />
                        </span>
                    </span>
                    <span className="nav-link-text">Dropdown</span>
                </Dropdown.Toggle>
                <Dropdown.Menu>
                    <Dropdown.Item>Action</Dropdown.Item>
                    <Dropdown.Item>Another action</Dropdown.Item>
                    <Dropdown.Item>Something else here</Dropdown.Item>
                    <Dropdown.Divider />
                    <Dropdown.Item>Separated link</Dropdown.Item>
                </Dropdown.Menu>
            </Dropdown>
            <Nav.Item>
                <Nav.Link eventKey="link-3">
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.Map />
                        </span>
                    </span>
                    <span className="nav-link-text">Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link disabled>
                    <span className="nav-icon-wrap">
                        <span className="feather-icon">
                            <Icons.Package />
                        </span>
                    </span>
                    <span className="nav-link-text">Disabled</span>
                </Nav.Link>
            </Nav.Item>
        </Nav>
  );
};

export default VerticalNavWithIcon;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.