# Navs

Navs are used to create on page navigation or tabs. There are two components that are used in order to create Nav/Tab: Nav which acts as a container and parent for NavItem which is the actual content of nav.

# Simple usage

<Nav>
    <NavItem title="First">
        <div>Content inside first tab</div>
    </NavItem>
    <NavItem title="Second">
        <div>Content inside second tab</div>
    </NavItem>
    <NavItem title="Third"> 
        <div>Content inside third tab</div>
    </NavItem>
</Nav>

# Displaying in column mode

You can provide navColumn Boolean property to Nav in order to display the nav buttons in column mode:

<Nav nav-column>
    <NavItem title="First">
        <div>Content inside first tab</div>
    </NavItem>
    <NavItem title="Second">
        <div>Content inside second tab</div>
    </NavItem>
    <NavItem title="Third"> 
        <div>Content inside third tab</div>
    </NavItem>
</Nav>

# Props of Nav

name default description required type
contentTag div HTML tag for Nav content. Default is div false String
initActiveTab 1 Initially activated tab number starting at 1 false Number
navFill false If set to true .nav-fill class will be applied and navigation tabs will expand to full width of container false Boolean
navColumn false If set to true .flex-column class will be applied and navigation tabs will appear as a list column false Boolean

# Props of NavItem

name description required type
title Title of Nav tab. Can be a string of html true String