PO Box 9406, Group 13, Sangkat 4, OU 5, Sihanoukville, Sihanouk Province, 18204 Cambodia
donboscocf.cambodia@gmail.com Mobile: +855 12 919 834 or +855 15 919 834

Create a tabbed navigation with different styles.

Usage

The Tab component consists of clickable tabs, that are aligned side by side.

Class Description
.uk-tab Add this class to a <ul> element to define the Tab component. Use <a> elements as tab items within the list.
.uk-active Add this class to a list item to apply an active state.
.uk-disabled Add this class to a list item to apply a disabled state.

The data-uk-tab attribute is required for two purposes. Firstly, it enables the responsive behaviour. If the parent container is too small to accomodate all tabs, they will be combined into a dropdown, toggled by a single tab, which represents the active tab item. This also requires the Dropdown component in order to work.

And secondly, its functionality is coupled to the Switcher component, which is necessary to dynamically transition through different contents using tabbed navigation.

Example

Markup

<ul class="uk-tab" data-uk-tab>
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li><a href="">...</a></li>
    <li class="uk-disabled"><a href="">...</a></li>
</ul>

Horizontal modifiers

Add one of the following classes to alter your tabs’ styling. These modifiers can also be combined.

Align tabs

Class Description
.uk-tab-flip Add this class to align tabs right and in reversed order.
.uk-tab-bottom Add this class to the <ul> to place tabs at the bottom. This can also be combined with the other modifiers.

Example

Markup

<ul class="uk-tab uk-tab-flip" data-uk-tab>...</ul>
<ul class="uk-tab uk-tab-bottom" data-uk-tab>...</ul>

Justify tabs

Add the .uk-tab-grid class and one of the .uk-width-* classes from the Grid component to the list items to arrange tabs in a grid that takes up full width of its parent element.

Example

Markup

<ul class="uk-tab uk-tab-grid uk-tab-bottom" data-uk-tab>
    <li class="uk-width-1-3"><a href="">...</a></li>
</ul>

Center tabs

Add the .uk-tab-center class to a <div> element around the tabbed navigation to center tabs.

Example

Markup

<div class="uk-tab-center">
    <ul class="uk-tab" data-uk-tab>...</ul>
</div>

Vertical modifiers

Add the .uk-tab-left or .uk-tab-right class to align tabs vertically to the left or right side.

Example

Markup

<ul class="uk-tab uk-tab-left uk-width-medium-1-2">
    <li>...</li>
</ul>
<ul class="uk-tab uk-tab-right uk-width-medium-1-2">
    <li>...</li>
</ul>

Responsive behavior

In narrower viewports, like phones, vertical tabs align themselves horizontally. Adding the data-uk-tab attribute will apply the same responsive behavior as horizontal tabs.


Tabs with dropdowns

This is an example of how to use tabs with the Dropdown component.

Example

Markup

<ul class="uk-tab">
    <li><a href="">...</a></li>

    <!-- This is the container enabling the JavaScript -->
    <li data-uk-dropdown="{mode:'click'}">

        <!-- This is the menu item toggling the dropdown -->
        <a href="">...</a>

        <!-- This is the dropdown -->
        <div class="uk-dropdown uk-dropdown-small">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="">...</a></li>
            </ul>
        </div>
    </li>
</ul>

Testimonials

  • Working in Don Bosco Technical school has been an absolute pleasure so far. Being welcomed completely by the community means it only took me two months to call Sihanoukville home. Teaching English to the students here has never once been

    Elena Arellano-Templer
  • The work I have done with Don Bosco, both with teaching and helping with the Children Fund has been all too rewarding

    Maryam Mohamed
  • I am really happy to be here, because I can help poor children who want to study. Although, I cannot help them directly I feel them in my heart. Sometimes the work is hard, but I love it! 

    Pech Chanmey
  • I feel very honored to be part of Don Bosco Children Fund Cambodia. I want to help and encourage the young people of Cambodia to keep studying and to keep going for their dreams.

    Penh Sokkheng
  • Hello! I am Teacher Gary from Brisbane, Australia. I previously taught English in China and Vietnam. Now I’m pleased to be in Cambodia as a volunteer teacher at Don Bosco Sihanoukville since June 2017. It is a pleasure teaching at

    Gary Briggs

Subscribe to our newsletter

Loading
logoDon Bosco Children Fund

It is a special project of the Don Bosco Foundation of Cambodia which was opened in 1992 to outreach and care to children from disadvantage communities and orphans. It grants scholarship to poor children and is supported by international sponsors.

BRANCHES IN CAMBODIA