Navbar

Version - 0.0.7

Displays a Navbar with centered RWE Logo on top of the page.

AppName

Installation

npm install @volta/navbar

Usage

import { NavbarRoot } from '@volta/navbar';

export default function Demo() {
  return (
    <NavbarRoot
      left={<span className="self-center font-medium text-md">AppName</span>}
    ></NavbarRoot>
  );
}

Examples

Sizes

The Navbar component comes with 3 different sizes that you can change it using the size prop. 'md' is the default size.

AppName

import { NavbarRoot } from '@volta/navbar';
 
export function Sizes() {
  return (
    <NavbarRoot
      size="sm"
      className="mb-2"
      left={<span className="self-center font-medium text-sm">AppName</span>}
    ></NavbarRoot>
    <NavbarRoot
      size="md"
      className="mb-2"
      left={<span className="self-center font-medium text-md">AppName</span>}
    ></NavbarRoot>
    <NavbarRoot
      size="lg"
      className="mb-2"
      left={<span className="self-center font-medium text-lg">AppName</span>}
    ></NavbarRoot>
  );
}

Variants

The component comes with 2 different variants that you can change it using the variant prop.

AppName

Colors

The Navbar component comes with 4 different colors that you can change it using the color prop.

AppName

import { NavbarRoot } from '@volta/Navbar';
 
export function ColorVariants() {
  return (
    <div>
      <NavbarRoot
        color="brand"
        left={<span className="self-center font-medium text-md">AppName</span>}
      ></NavbarRoot>
      <NavbarRoot
        color="primary"
        left={<span className="self-center font-medium text-md">AppName</span>}
      ></NavbarRoot>
      <NavbarRoot
        color="secondary"
        left={<span className="self-center font-medium text-md">AppName</span>}
      ></NavbarRoot>
      <NavbarRoot
        color="tertiary"
        left={<span className="self-center font-medium text-md">AppName</span>}
      ></NavbarRoot>
    </div>
  );
}

Items left or right beside the logo

The Navbar component comes with 4 different colors that you can change it using the color prop.

App

import { NavbarRoot } from '@volta/Navbar';
 
export function ColorVariants() {
  return (
    <NavbarRoot
      left={
        <div className="flex gap-1">
          <Rwe144 size="md" className="self-center" />
          <span className="self-center font-medium text-sm ml-1">App</span>
          <nav className="flex ml-8">
            <ul className="flex gap-4 text-sm items-center">
              <li>Dashboard</li>
              <li>Projects</li>
              <li>Countries</li>
              <li>Power</li>
            </ul>
          </nav>
        </div>
      }
      right={
        <div className="self-center">
          <Avatar
            size="sm"
            className="w-8 h-8 bg-slate-200 dark:bg-slate-600"
            src="httpls://i.pravatar.cc/100"
            fallback="MC"
            color="brand"
          />
        </div>
      }
    ></NavbarRoot>
  );
}

Props

The following props are available for Navbar component. These are the custom props that we've added for the component and you can use all the other native Div/header props as well.

Attribute	Type	Description	Default
`variant`	Variant	Change Navbar variant	`solid`
`color`	Colors	Change Navbar Colors	`primary`
`size`	Size	Change Navbar size	`md`
`className`	`string`	Add custom className	`''`
`left`	`node`	Add content left beside the logo
`right`	`node`	Add content right beside the logo

Menubar Navigation Menu