wovoui

Navs and tabs

Base nav

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.


<div class="border">
    <Nav>
        <NavItem active>
            Active
        </NavItem>
        <NavItem>
            Link
        </NavItem>
        <NavItem>
            Link
        </NavItem>
        <NavItem disabled>
            Disabled
        </NavItem>
    </Nav>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Horizontal alignment

Change the horizontal alignment of your nav with flexbox utilitiesopen in new window. By default, navs are left-aligned, but you can easily change them to center or right aligned.

Center Alignment


<Nav align="center">
    <NavItem active>
        Active
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem disabled>
        Disabled
    </NavItem>
</Nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Right Alignment


<Nav align="right">
    <NavItem active>
        Active
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem disabled>
        Disabled
    </NavItem>
</Nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Vertical

Set prop vertical to true to make the <Nav> vertical.


<Nav vertical>
    <NavItem active>
        Active
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem disabled>
        Disabled
    </NavItem>
</Nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Tabs Menu

Set prop tabs to true to make Tabs Menu.


<Nav tabs>
    <NavItem active>
        Active
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem disabled>
        Disabled
    </NavItem>
</Nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Pills

Take that same HTML, but use pills prop instead:


<Nav pills>
    <NavItem active>
        Active
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem disabled>
        Disabled
    </NavItem>
</Nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Fill and justify


<Nav pills fill>
    <NavItem active>
        Active
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem>
        Link
    </NavItem>
    <NavItem disabled>
        Disabled
    </NavItem>
</Nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Justified

Use prop justified to make equal width nav items.