Professional Directory
PROFESSIONAL ASSOCIATIONS & INDIVIDUALS
Access our database here with a membership of over 50,000...
Professional Community
Network of Professional
Become a members of a professional network and share your knowledge...
Professional Centre
Conferencing and Meetings
The centre providing meeting rooms and conference facilities where professionals…
Professional Convention
Safari Park
APSEA Two-Day National Professional Convention at The Nairobi Safari Park Hotel on July 5th to 6th 2018 ...
Professional Library
Access Documents
Download and upload professional material to increase you knowledge on various topics...

The Association of Professional Societies in East Africa (APSEA) is a Joint Forum and an umbrella body of professionals associations established in 1961

Defines different styles for list navigations.

Usage

To apply this component, add the .uk-nav class to an <ul> element. Use <a> elements as menu items within the list. To apply an active state to a menu item, just add the .uk-active class.

Example

NOTE By default, the nav has no styling. That's why it is important to add a modifier class to give it some styling. In our examples we used the .uk-nav-side class.

Markup

<ul class="uk-nav">
    <li><a href="#">...</a></li>
    <li class="uk-active"><a href="#">...</a></li>
</ul>

Nested navs

You can easily add any number of <ul> elements to your nav.

Class Description
.uk-nav-sub Add this class to the first nested <ul> for optimized spacing.
.uk-parent Add this class to indicate a parent menu item.
.uk-nav-parent-icon Add this class to the nav to add icons, indicating parent items.

Example

Markup

<ul class="uk-nav uk-nav-parent-icon">
    <li class="uk-parent"><a href="#">...</a>
        <ul class="uk-nav-sub">
            <li><a href="#">...</a>
                <ul>...</ul>
            </li>
        </ul>
    </li>
</ul>

Accordion

By default child menu items are always visible. To apply the accordion effect, just add the data-uk-nav attribute to the main <ul>. When clicking on a parent item, an open one will close, allowing only one open nested list at a time. To avoid this behavior, just append {multiple:true} to the data attribute.

Example

Markup

<ul class="uk-nav uk-nav-parent-icon" data-uk-nav>
    <li class="uk-parent">
        <a href="#">...</a>
        <ul class="uk-nav-sub">
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
</ul>
<ul class="uk-nav uk-nav-parent-icon" data-uk-nav="{multiple:true}">
    <li class="uk-parent">
        <a href="#">...</a>
        <ul class="uk-nav-sub">
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
</ul>

Header and divider

Add one of the following classes to a list item to create a header or a divider between items.

Class Description
.uk-nav-header Add this class to a <li> element to create a header.
.uk-nav-divider Add this class to a <li> element to create a divider separating menu items.

NOTE You can also add subtitles to nav items. Just create a <div> element inside the <a> element within the list item.

Example

Markup

<li class="uk-nav-header">...</li>
<li class="uk-nav-divider"></li>

Style modifiers

There are several modifiers to style the nav according to the context, in which it is used.

Nav side

Add the .uk-nav-side class to place a nav inside your sidebar, panels or anywhere else in your content.

Example

Markup

<div class="uk-panel uk-panel-box">
    <h3 class="uk-panel-title">...</h3>
    <ul class="uk-nav uk-nav-side">...</ul>
</div>

Nav dropdown

Add the .uk-nav-dropdown class to place a nav inside a default dropdown from the Dropdown component.

Example

Markup

<div class="uk-dropdown">
    <ul class="uk-nav uk-nav-dropdown">...</ul>
</div>

Nav navbar

Add the .uk-nav-navbar class to place the nav inside a navbar dropdown from the Navbar component.

Example

Markup

<div class="uk-dropdown uk-dropdown-navbar">
    <ul class="uk-nav uk-nav-navbar">...</ul>
</div>

Nav off-canvas

Add the .uk-nav-offcanvas class to place the nav inside an off-canvas sidebar from the Off-canvas component.

Example

Markup

<div class="uk-offcanvas-bar">
    <ul class="uk-nav uk-nav-offcanvas">...</ul>
</div>
Don't have an account yet? Register Now!

Sign in to your account