Navbar

The navbar component is an important section of any website as it is the first section that appears on any page and it serves the purpose of allowing your users to navigate throughout your website.

Generally, the navigation bar consists of the logo of your website, a list of menu items for navigation and other secondary elements such as buttons, dropdowns, and a hamburger menu for mobile devices.

All interactivity and options are handled by using React properties and you can customise the appearance of the navbar using the classes from Tailwind CSS.

To start using the navbar component you need to import it from Pol-ui:

import { Navbar } from "pol-ui";

Default Navbar

import { Navbar } from "pol-ui";
const Tab = () => (
  <div className="h-64 w-96 grid place-items-center">Some fancy lists</div>
);
const NavbarComponent = () => {
  return (
    <Navbar
      leftContent={
        <img
          src="https://ui.polgubau.com/logo.png"
          className="h-6 sm:h-7"
          alt="Pol-ui Logo"
        />
      }
      links={[
        { href: "#", label: "Home" },
        { href: "#", label: "About", content: <Tab /> },
        { href: "#", label: "Services", content: <Tab /> },
        { href: "#", label: "Pricing" },
        { href: "#", label: "Contact" },
      ]}
    />
  );
};
export default NavbarComponent;

Props

Prop name	Type	Default	Description
defaultOpen	boolean	false	If true, the navbar will be open by default
theme	NavbarTheme		The theme of the navbar
rightContent	React.ReactNode	undefined	The content that will be displayed on the right side of the navbar
leftContent	React.ReactNode	undefined	The content that will be displayed on the left side of the navbar
links	NavbarLink[]	undefined	The links that will be displayed on the navbar
linkClassName	string	undefined	The class name that will be applied to the links
hasHambuguer	boolean	true	If true, the navbar will have a hamburger menu for mobile devices

💡

You can also provide any prop comming from the HTML nav tag.

NavbarLink Props

Prop name	Type	Default	Description
href	string	-	The URL of the link
label	string	-	The label of the link
content	React.ReactNode	undefined	A sublist for navigation menu
active	boolean	false	If true, the link will be active

💡

You can also provide any prop comming from the HTML anchor tag.

Examples

With CTA

import { Navbar, Button } from "pol-ui";
const Tab = () => (
  <div className="h-64 w-96 grid place-items-center">Some fancy lists</div>
);
const NavbarComponent = () => {
  return (
    <Navbar
      leftContent={
        <img
          src="https://ui.polgubau.com/logo.png"
          className="h-6 sm:h-7"
          alt="Pol-ui Logo"
        />
      }
      rightContent={<Button>Get started</Button>}
      links={[
        { href: "#", label: "Home" },
        { href: "#", label: "About", content: <Tab /> },
        { href: "#", label: "Services", content: <Tab /> },
        { href: "#", label: "Pricing" },
        { href: "#", label: "Contact" },
      ]}
    />
  );
};
export default NavbarComponent;

With Dropdown

import { Navbar, DropdownItem, Dropdown, Avatar } from "pol-ui";
const Tab = () => (
  <div className="h-64 w-96 grid place-items-center">Some fancy lists</div>
);
const NavbarComponent = () => {
  return (
    <Navbar
      leftContent={
        <img
          src="https://ui.polgubau.com/logo.png"
          className="h-6 sm:h-7"
          alt="Pol-ui Logo"
        />
      }
      rightContent={
        <div className="flex gap-3 md:order-2">
          <Dropdown
            label="User settings"
            trigger={
              <Avatar
                alt="User settings"
                img="https://avatars.githubusercontent.com/u/63197171?v=4"
              />
            }
          >
            <DropdownItem label="Profile" />
            <DropdownItem label="Settings" />
            <DropdownItem label="Logout" />
          </Dropdown>
        </div>
      }
      links={[
        { href: "#", label: "Home" },
        { href: "#", label: "About", content: <Tab /> },
        { href: "#", label: "Services", content: <Tab /> },
        { href: "#", label: "Pricing" },
        { href: "#", label: "Contact" },
      ]}
    />
  );
};
export default NavbarComponent;

With custom classes

import { Navbar } from "pol-ui";
const Tab = () => (
  <div className="h-64 w-96 grid place-items-center">Some fancy lists</div>
);
const NavbarComponent = () => {
  return (
    <Navbar
      className="bg-primary-900 rounded-full max-w-[800px] mx-auto top-5"
      leftContent={
        <img
          src="https://ui.polgubau.com/logo.png"
          className="h-6 sm:h-7"
          alt="Pol-ui Logo"
        />
      }
      links={[
        { href: "#", label: "Home" },
        { href: "#", label: "About", content: <Tab /> },
        { href: "#", label: "Services", content: <Tab /> },
        { href: "#", label: "Pricing" },
        { href: "#", label: "Contact" },
      ]}
    />
  );
};
export default NavbarComponent;

With custom link classes

import { Navbar } from "pol-ui";
const Tab = () => (
  <div className="h-64 w-96 grid place-items-center">Some fancy lists</div>
);
const NavbarComponent = () => {
  return (
    <Navbar
      linkClassName="text-primary-100 bg-primary-800 w-[150px]"
      leftContent={
        <img
          src="https://ui.polgubau.com/logo.png"
          className="h-6 sm:h-7"
          alt="Pol-ui Logo"
        />
      }
      links={[
        { href: "#", label: "Home" },
        { href: "#", label: "About", content: <Tab /> },
        { href: "#", label: "Services", content: <Tab /> },
        { href: "#", label: "Pricing" },
        { href: "#", label: "Contact" },
      ]}
    />
  );
};
export default NavbarComponent;

Without Hamburguer

import { Navbar } from "pol-ui";
const Tab = () => (
  <div className="h-64 w-96 grid place-items-center">Some fancy lists</div>
);
const NavbarComponent = () => {
  return (
    <Navbar
      hasHambuguer={false}
      leftContent={
        <img
          src="https://ui.polgubau.com/logo.png"
          className="h-6 sm:h-7"
          alt="Pol-ui Logo"
        />
      }
      rightContent={
        <div className="flex gap-3 md:order-2">
          <Dropdown
            label="User settings"
            trigger={
              <Avatar
                alt="User settings"
                img="https://avatars.githubusercontent.com/u/63197171?v=4"
              />
            }
          >
            <DropdownItem label="Profile" />
            <DropdownItem label="Settings" />
            <DropdownItem label="Logout" />
          </Dropdown>
        </div>
      }
      links={[
        { href: "#", label: "Home" },
        { href: "#", label: "About", content: <Tab /> },
        { href: "#", label: "Services", content: <Tab /> },
        { href: "#", label: "Pricing" },
        { href: "#", label: "Contact" },
      ]}
    />
  );
};
export default NavbarComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface NavbarTheme {
  root: NavbarRootTheme;
  collapse: NavbarCollapseTheme;
  toggle: NavbarToggleTheme;
}
interface NavbarToggleTheme {
  base: string;
}
 
interface NavbarRootTheme {
  base: string;
  inner: {
    base: string;
  };
}

Default Navbar

Props

Navbar Props

NavbarLink Props

Examples

Navbar With CTA

Navbar With custom classes

Navbar With custom link classes

Navbar Without Hamburguer

Theme

Navbar

Default Navbar

Props

Navbar Props

NavbarLink Props

Examples

Navbar With CTA

Navbar With Dropdown

Navbar With custom classes

Navbar With custom link classes

Navbar Without Hamburguer

Theme