#Basic

<Navbar size="xl">
  <NavbarLeft>
    <NavbarItem href="https://one.com">One</NavbarItem>
    <NavbarItem href="https://two.com">Two</NavbarItem>
  </NavbarLeft>
</Navbar>

#NavbarLeft and NavbarRight

<Navbar size="xl">
  <NavbarLeft>
    <NavbarItem href="https://one.com">One</NavbarItem>
    <NavbarItem href="https://two.com">Two</NavbarItem>
  </NavbarLeft>
  <NavbarRight>
    <NavbarItem href="https://three.com">Three</NavbarItem>
    <NavbarItem href="https://four.com">Four</NavbarItem>
  </NavbarRight>
</Navbar>

#Background

Set background to "neutral" or "none". Defaults to "neutral".
<Stack class="w-full gap-5">
  <Navbar size="xl" background="neutral">
    <NavbarLeft>
      <NavbarItem href="https://one.com">One</NavbarItem>
      <NavbarItem href="https://two.com">Two</NavbarItem>
    </NavbarLeft>
    <NavbarRight>
      <NavbarItem href="https://three.com">Three</NavbarItem>
      <NavbarItem href="https://four.com">Four</NavbarItem>
    </NavbarRight>
  </Navbar>
  <Navbar size="xl" background="none">
    <NavbarLeft>
      <NavbarItem href="https://one.com">One</NavbarItem>
      <NavbarItem href="https://two.com">Two</NavbarItem>
    </NavbarLeft>
    <NavbarRight>
      <NavbarItem href="https://three.com">Three</NavbarItem>
      <NavbarItem href="https://four.com">Four</NavbarItem>
    </NavbarRight>
  </Navbar>
</Stack>

#Props

size
Required
false
Type
"sm" | "md" | "lg" | "xl"
Default
"md"
Notes
Set this to the same value as the Container.
background
Required
false
Type
"neutral" | "none"
Default
"neutral"
sticky
Required
false
Type
boolean
Default
false
Notes
Doesn't apply to the stacked UI that appears on small viewports.
children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
Omit<ComponentProps<"nav">, "size">
Default
none
Notes
See the docs for rest parameters. For Navbar, you could pass anything you normally would pass to <nav> because the return value looks something like this:
<nav class={containerClass} {...restWithoutClass}>
  ...
</nav>

NavbarLeft

children*
Required
true
Type
ComponentChild
Default
none

NavbarRight

children*
Required
true
Type
ComponentChild
Default
none

NavbarItem

href*
Required
true
Type
string
Default
none
isActive
Required
false
Type
boolean
Default
false
children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
ComponentProps<"li">
Default
none