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

Defines different styles for the navigation bar.

Usage

The Navbar component consists of the navbar itself and one or more navigations.

Class Description
.uk-navbar Add this class to a <nav> element to define the Navbar component.
.uk-navbar-nav Add this class to a <ul> element to create a navigation. Use <a> elements as menu items within the list.
.uk-active Add this class to a list item to apply an active state.
.uk-parent Add this class to indicate a parent menu item.

Example

Markup

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

Navbar flip

Add the .uk-navbar-flip class to a <div> element to group and align navigations and items to the right.

Example

Markup

<nav class="uk-navbar">
    <div class="uk-navbar-flip">
        <ul class="uk-navbar-nav">
            <li><a href="">...</a></li>
        </ul>
    </div>
</nav>

Navbar subtitle

Add the .uk-navbar-nav-subtitle class to an <a> element in the list item to indicate that it has a subtitle. Use a <div> element for the subtitle itself.

Example

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">
        <li><a href="" class="uk-navbar-nav-subtitle">
            ...
            <div>...</div>
        </a></li>
    </ul>
</nav>

Content

You can also add custom content to the navbar, like text, icons, buttons, forms or even a toggle. By default, there is no JavaScript attached to the toggle. As an example, you can add an off-canvas navigation from the Off-canvas component.

Class Description
.uk-navbar-content Add this class to a <div> element, which serves as a container for your custom content. The content will be centered vertically.
.uk-navbar-brand Add this class to an <a> or <div> element to indicate your brand.
.uk-navbar-center Add this class to center your navbar content or brand. The element needs to be the last child in the navbar.
.uk-navbar-toggle Add this class to an <a> or <div> element to create an icon as a toggle.
.uk-navbar-toggle-alt Add this class to create an alternative icon as a toggle.

Example

Markup

<nav class="uk-navbar">
    <a href="" class="uk-navbar-brand">...</a>
    <ul class="uk-navbar-nav">...</ul>
    <div class="uk-navbar-content">...</div>
    <div class="uk-navbar-content uk-navbar-center">...</div>
    <a href="" class="uk-navbar-toggle"></a>
</nav>

Responsive visibility

To hide or display certain navbar items, just add one of the responsive visibility classes from the Utility component. This comes in handy, if you want to use a toggle to trigger a mobile navigation for example.

Example

Resize your browser window to see it in action.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav uk-hidden-small">...</ul>
    <a href="#my-id" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>
</nav>

<div id="my-id" class="uk-offcanvas">
    ...
</div>

NOTE In this example we added an off-canvas sidebar fron the Off-canvas component.


Modifiers

To display the navbar in a different style, just add modifier classes. These modifiers can be combined with each other

Navbar attached

Add the .uk-navbar-attached class to optimize the navbar’s styling to be attached to the top of the viewport. For example, rounded corners will be removed.

Example

Markup

<nav class="uk-navbar uk-navbar-attached">...</nav>

A navbar can contain a dropdown from the Dropdown component. Just add the .uk-dropdown-navbar modifier to the dropdown, so it fits perfectly into the navbar’s styling.

Example

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