Navbar

Create navigation bars

Code Example

<Navbar class="bg-base-100 rounded-box">
  <Button ghost class="text-xl normal-case">daisyUI Kit 🌼</Button>
</Navbar>

Components

Navbar is a standalone component.

Navbar can be customized using the following props:

Prop	Type	Description
`is`	string	Allows changing the element tag.
`glass`	boolean	Enables the glass style.

With Icon

Code Example

<Navbar class="bg-base-100 rounded-box">
  <FlexItem flex-1>
    <Button ghost class="text-xl normal-case">daisyUI Kit 🌼</Button>
  </FlexItem>
  <Button square ghost>
    <Icon name="feather:more-horizontal" :style="{ fontSize: '1.4em' }" />
  </Button>
</Navbar>

With Icons at End and Start

Code Example

<Navbar class="bg-base-100 rounded-box">
  <Button square ghost>
    <Icon name="feather-menu" :style="{ fontSize: '1.4em' }" />
  </Button>
  <FlexItem flex-1>
    <Button ghost class="text-xl normal-case">daisyUI Kit 🌼</Button>
  </FlexItem>
  <Button square ghost>
    <Icon name="feather:more-horizontal" :style="{ fontSize: '1.4em' }" />
  </Button>
</Navbar>

Code Example

<Navbar class="bg-base-100 rounded-box">
  <FlexItem grow>
    <Button ghost class="text-xl normal-case">
      daisyUI Kit 🌼
    </Button>
  </FlexItem>
  <FlexItem flex-none>
    <Menu horizontal class="p-0">
      <MenuItem><a>Item 1</a></MenuItem>
      <MenuItem tabindex="0">
        <Dropdown>
          <DropdownTarget> Parent </DropdownTarget>
            <Menu class="p-2 bg-base-100">
              <MenuItem><a>Submenu 1</a></MenuItem>
              <MenuItem><a>Submenu 2</a></MenuItem>
            </Menu>
        </Dropdown>
      </MenuItem>
      <MenuItem><a>Item 3</a></MenuItem>
    </Menu>
  </FlexItem>
</Navbar>

Code Example

<Navbar class="rounded-box bg-base-100">
  <FlexItem grow>
    <Button ghost class="text-xl normal-case">daisyUI Kit 🌼</Button>
  </FlexItem>
  <Flex none class="gap-2">
    <FormControl>
      <TextInput bordered placeholder="Search" />
    </FormControl>
    <Dropdown end>
      <Button ghost circle is="label" tabindex="0">
        <Avatar circle class="w-10">
          <img src="https://api.lorem.space/image/face?hash=33791" />
        </Avatar>
      </Button>
      <DropdownContent>
        <Menu compact tabindex="0" class="p-2 mt-3 shadow bg-base-100 rounded-box w-52">
          <MenuItem>
            <a class="justify-between">
              Profile
              <span class="badge">New</span>
            </a>
          </MenuItem>
          <MenuItem><a>Settings</a></MenuItem>
          <MenuItem><a>Logout</a></MenuItem>
        </Menu>
      </DropdownContent>
    </Dropdown>
  </Flex>
</Navbar>

Code Example

<Navbar class="bg-base-100 rounded-box">
  <FlexItem grow>
    <Button ghost class="text-xl normal-case">daisyUI Kit 🌼</Button>
  </FlexItem>
  <FlexItem none>
    <Dropdown end>
      <Button ghost circle as="label" tabindex="0">
        <Indicator>
          <Icon name="feather:shopping-cart" :style="{ fontSize: '1.4em' }" />
          <IndicatorItem>
            <Badge sm>8</Badge>
          </IndicatorItem>
        </Indicator>
      </Button>
      <DropdownContent>
        <Card compact tabindex="0" class="mt-3 shadow w-52 bg-base-100">
          <CardBody>
            <Text lg bold>8 Items</Text>
            <Text info>Subtotal: $999</Text>
            <CardActions>
              <Button primary block>View cart</Button>
            </CardActions>
          </CardBody>
        </Card>
      </DropdownContent>
    </Dropdown>
    <Dropdown end>
      <Button ghost circle is="label" tabindex="0">
        <Avatar circle class="w-10">
          <img src="https://api.lorem.space/image/face?hash=33791" />
        </Avatar>
      </Button>
      <DropdownContent>
        <Menu compact tabindex="0" class="p-2 mt-3 shadow bg-base-100 rounded-box w-52">
          <MenuItem>
            <a class="justify-between">
              Profile
              <Badge>New</Badge>
            </a>
          </MenuItem>
          <MenuItem><a>Settings</a></MenuItem>
          <MenuItem><a>Logout</a></MenuItem>
        </Menu>
      </DropdownContent>
    </Dropdown>
  </FlexItem>
</Navbar>

Code Example

<Navbar class="bg-base-100 rounded-box">
  <NavbarStart>
    <Dropdown>
      <Button is="label" ghost circle tabindex="0">
        <Icon name="feather:align-left" :style="{ fontSize: '1.4em' }" />
      </Button>
      <DropdownContent>
        <Menu compact tabindex="0" class="p-2 mt-3 shadow bg-base-100 rounded-box w-52">
          <MenuItem><a>Homepage</a></MenuItem>
          <MenuItem><a>Portfolio</a></MenuItem>
          <MenuItem><a>About</a></MenuItem>
        </Menu>
      </DropdownContent>
    </Dropdown>
  </NavbarStart>
  <NavbarCenter>
    <Button ghost class="text-xl normal-case">daisyUI Kit 🌼</Button>
  </NavbarCenter>
  <NavbarEnd>
    <Button ghost circle>
      <Icon name="feather:search" :style="{ fontSize: '1.4em' }" />
    </Button>
    <Button ghost circle>
      <Indicator>
        <Icon name="feather:bell" :style="{ fontSize: '1.4em' }" />
        <IndicatorItem>
          <Badge xs primary></Badge>
        </IndicatorItem>
      </Indicator>
    </Button>
  </NavbarEnd>
</Navbar>

With Responsive Adjustments

Code Example

<Navbar class="rounded-box bg-base-100">
  <NavbarStart>
    <Dropdown>
      <DropdownButton ghost class="lg:hidden">
        <Icon name="feather:align-left" class="text-2xl pointer-events-none" />
      </DropdownButton>
      <DropdownContent>
        <Menu compact tabindex="0" class="p-2 mt-3 shadow bg-base-100 rounded-box w-52">
          <MenuItem><a>Item 1</a></MenuItem>
          <MenuItem tabindex="0">
            <a class="justify-between">
              Parent
              <Icon name="feather:chevron-right" :style="{ fontSize: '1.4em' }" />
            </a>
            <Menu class="p-2 bg-base-100">
              <MenuItem><a>Submenu 1</a></MenuItem>
              <MenuItem><a>Submenu 2</a></MenuItem>
            </Menu>
          </MenuItem>
          <li><a>Item 3</a></li>
        </Menu>
      </DropdownContent>
    </Dropdown>
    <Button ghost class="text-xl normal-case">
      daisyUI Kit 🌼
    </Button>
  </NavbarStart>
  <NavbarCenter class="hidden lg:flex">
    <Menu horizontal class="p-0">
      <MenuItem><a>Item 1</a></MenuItem>
      <MenuItem>
        <Dropdown close-on-click-outside>
          <DropdownTarget> Parent </DropdownTarget>
          <Menu class="p-2 bg-base-100">
            <MenuItem><a>Submenu 1</a></MenuItem>
            <MenuItem><a>Submenu 2</a></MenuItem>
          </Menu>
        </Dropdown>
      </MenuItem>
      <li><a>Item 3</a></li>
    </Menu>
  </NavbarCenter>
  <NavbarEnd>
    <Button is="a">
      Get started
    </Button>
  </NavbarEnd>
</Navbar>

With Colors

Code Example

<Navbar class="bg-neutral text-neutral-content rounded-box">
  <Button ghost class="text-xl normal-case">daisyUI Kit 🌼</Button>
</Navbar>

Code Example

<Navbar class="bg-base-300 rounded-box">
  <Button ghost class="text-xl normal-case">daisyUI Kit 🌼</Button>
</Navbar>

Code Example

<Navbar class="bg-primary text-primary-content rounded-box">
  <Button ghost class="text-xl normal-case">daisyUI Kit 🌼</Button>
</Navbar>

Prev Menu

Next Pagination