Navbar

Name: Boreal UI
Author: Davin Chiupka

The Navbar component renders a horizontal navigation bar with icons, theme styling, and consumer-controlled active state matching.

Usage & Examples

Default

default.tsx


  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />

Visual variants

Themes

primary

secondary

tertiary

quaternary

Variants

solid

outline

glass

Rounding

none

medium

large

Shadows

none

light

strong

visual-variants.tsx

// Themes

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar theme="primary"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar theme="secondary"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar theme="tertiary"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar theme="quaternary"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

// Variants

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar variant="solid"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar variant="outline"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar variant="glass"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

// Rounding

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar rounding="none"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar rounding="medium"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar rounding="large"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

// Shadows

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar shadow="none"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar shadow="light"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />
        

  const items = [
    { icon: <FaHome />, label: "Home", path: "/" },
    { icon: <FaCompactDisc />, label: "Music", path: "/music" },
    { icon: <FaImage />, label: "Images", path: "/photography" },
    { icon: <FaCode />, label: "Code", path: "/code" },
    { icon: <FaCommentAlt />, label: "Blog", path: "/blog" },
    { icon: <FaPaintBrush />, label: "Design", path: "/design" }
  ];
  
  const currentPath = "/code/project-one";
  
  const normalizePath = (p: string) =>
    p.endsWith("/") && p.length > 1 ? p.slice(0, -1) : p;
  
  const isItemActive = (item) => {
    const itemPath = normalizePath(item.path);
    const activePath = normalizePath(currentPath);
  
    if (itemPath === "/") {
      return activePath === "/";
    }
  
    return activePath === itemPath || activePath.startsWith(`${itemPath}/`);
  };
  
  <Navbar shadow="strong"
    items={items}
    isItemActive={isItemActive}
    theme="primary"
    rounding="full"
    shadow="light"
  />

Props API

Navbar props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	Optional ID of an element that describes this navigation landmark.
`aria-label`	`string`	No	aria	`"Main navigation"`	Accessible label for the navigation landmark. Defaults to "Main navigation".
`aria-labelledby`	`string`	No	aria	`—`	Optional ID of an external element that labels this navigation landmark. Prefer this when the nav is visually labelled by a heading.
`className`	`string`	No	styling	`—`	Optional extra class name(s) for custom styling.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`getItemAriaLabel`	`((item: NavItem) => string)`	No	events	`—`	Optional callback to provide a custom accessible label for each nav item. Falls back to the item label when not provided.
`iconClassName`	`string`	No	props	`—`	Additional class names for each icon wrapper.
`isItemActive`	`((item: NavItem) => boolean)`	No	events	`—`	Optional callback used to determine whether a nav item should be styled as active.
`itemClassName`	`string`	No	props	`—`	Additional class names for each nav link.
`items`	`NavItem[]`	Yes	props	`—`	Array of navigation items to render in the NavBar.
`labelClassName`	`string`	No	props	`—`	Additional class names for each label.
`linkContentClassName`	`string`	No	props	`—`	Additional class names for each link content wrapper.