wovoui

Navbar

The component <Navbar> is a wrapper that positions branding, navigation, and other elements into a concise header. It's easily extensible and thanks to the <Collapse> component, it can easily integrate responsive behaviors.

Example


<Navbar brand="Navbar Brand">
    <template #default="{collapsed}">
        <Collapse is-nav :visible="collapsed">
            <Nav class="me-auto mb-2 mb-lg-0" navs>
                <NavItem active>Home</NavItem>
                <NavItem>Link</NavItem>
                <NavItemDropdown text="Dropdown">
                    <DropdownItem>Action</DropdownItem>
                    <DropdownItem>Another action</DropdownItem>
                    <DropdownItem>Something else here</DropdownItem>
                </NavItemDropdown>
                <NavItem disabled>Disabled</NavItem>
            </Nav>
            <form class="d-flex">
                <Input class="me-2" type="search" placeholder="Search" aria-label="Search"></Input>
                <Button variant="success" outline type="submit">Search</Button>
            </form>
        </Collapse>
    </template>
</Navbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Brand

Use prop brand or slot brand to set brand for a <Navbar>.

Above Example uses brand prop. Now, check the below example which uses brand as slot. If both prop and slot is used then slot will have higher priority.


<Navbar>
    <template #brand>
        Navbar Brand
    </template>
    <template #default="{collapsed}">
        <Collapse is-nav :visible="collapsed">
            <Nav class="me-auto mb-2 mb-lg-0" navs>
                <NavItem active>Home</NavItem>
                <NavItem>Link</NavItem>
                <NavItemDropdown text="Dropdown">
                    <DropdownItem>Action</DropdownItem>
                    <DropdownItem>Another action</DropdownItem>
                    <DropdownItem>Something else here</DropdownItem>
                </NavItemDropdown>
                <NavItem disabled>Disabled</NavItem>
            </Nav>
            <form class="d-flex">
                <Input class="me-2" type="search" placeholder="Search" aria-label="Search"></Input>
                <Button variant="success" outline type="submit">Search</Button>
            </form>
        </Collapse>
    </template>
</Navbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Brand URL

Use prop brand-url to set URL for <Navbar>'s brand.


<Navbar brand="Navbar Brand" brand-url="https://wovosoft.com">
    <template #default="{collapsed}">
        <Collapse is-nav :visible="collapsed">
            <Nav class="me-auto mb-2 mb-lg-0" navs>
                <NavItem active>Home</NavItem>
                <NavItem>Link</NavItem>
                <NavItemDropdown text="Dropdown">
                    <DropdownItem>Action</DropdownItem>
                    <DropdownItem>Another action</DropdownItem>
                    <DropdownItem>Something else here</DropdownItem>
                </NavItemDropdown>
                <NavItem disabled>Disabled</NavItem>
            </Nav>
            <form class="d-flex">
                <Input class="me-2" type="search" placeholder="Search" aria-label="Search"></Input>
                <Button variant="success" outline type="submit">Search</Button>
            </form>
        </Collapse>
    </template>
</Navbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

By Default, Navbar toggler is enabled. It shows on smaller screens. If you do not need it, then set toggle-enabled to false.

You can use <NavbarNav> or <Nav> both components. <NavbarNav> is just a wrapper of <Nav> component. Internally, it adds navs prop to <Nav> component. So, if you are already using <Nav> component in a certain component, just add navs prop.

Color schemes

There are two props variant & bg-variant. variant prop is used to make the color lighter or darker. bg-variant is used to make different background colors.

Dark Variants

Light Variants

Position

Use either top or bottom for fixed prop to make a <Navbar> be fixed either at top or bottom respectively.


<Navbar fixed="top" brand="Fixed Top">
    <Nav class="me-auto mb-2 mb-lg-0" navs>
        <NavItem active>Home</NavItem>
        <NavItem>Link</NavItem>
        <NavItem disabled>Disabled</NavItem>
    </Nav>
</Navbar>
1
2
3
4
5
6
7
8

<Navbar fixed="bottom" brand="Fixed Bottom">
    <Nav class="me-auto mb-2 mb-lg-0" navs>
        <NavItem active>Home</NavItem>
        <NavItem>Link</NavItem>
        <NavItem disabled>Disabled</NavItem>
    </Nav>
</Navbar>
1
2
3
4
5
6
7
8

<Navbar sticky="top" brand="Sticky Top">
    <Nav class="me-auto mb-2 mb-lg-0" navs>
        <NavItem active>Home</NavItem>
        <NavItem>Link</NavItem>
        <NavItem disabled>Disabled</NavItem>
    </Nav>
</Navbar>
1
2
3
4
5
6
7
8

<Navbar sticky="bottom" brand="Sticky Bottom">
    <Nav class="me-auto mb-2 mb-lg-0" navs>
        <NavItem active>Home</NavItem>
        <NavItem>Link</NavItem>
        <NavItem disabled>Disabled</NavItem>
    </Nav>
</Navbar>
1
2
3
4
5
6
7
8

Scrolling

<NavbarNav> can be scrollable when scroll-height prop is set. You can use either numerical value without units, or string value with units. When numerical value is used, default unit will be px.


<Navbar sticky="bottom" brand="Sticky Bottom">
    <NavbarNav class="me-auto mb-2 mb-lg-0" navs :scroll-height="200">
        <NavItem active>Home</NavItem>
        <NavItem>Link</NavItem>
        <NavItem disabled>Disabled</NavItem>
    </NavbarNav>
</Navbar>
1
2
3
4
5
6
7
8

Responsive behaviors

Set value for expands-on to add expanding breakpoint. Valid values are {sm|md|lg|xl|xxl}


<Navbar expands-on="xl" brand="Sticky Bottom">
    <NavbarNav class="me-auto mb-2 mb-lg-0" navs :scroll-height="200">
        <NavItem active>Home</NavItem>
        <NavItem>Link</NavItem>
        <NavItem disabled>Disabled</NavItem>
    </NavbarNav>
</Navbar>
1
2
3
4
5
6
7
8