Create layout boxes with different styles.

UIkit uses panels to outline certain sections of your content, which can be styled differently. Typically, panels are arranged in grid columns from the Grid component.

---

Usage

The Panel component consists of the panel itself, the panel title and a panel badge. To prevent redundant white space, top and bottom margins are removed from the panel's content.

Example

NOTE By default, a panel is blank and has no styling. That is why it is important to add a modifier class, which gives the panel some styling. In our examples we used the .uk-panel-box class.

Markup

<div class="uk-panel">
    <div class="uk-panel-badge uk-badge">...</div>
    <h3 class="uk-panel-title">...</h3>
    ...
</div>

---

Panels in a grid

This is a short example of how to use panels with the Grid component. Both panels are using the .uk-width-medium-1-2 class.

Example

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </div>
</div>

---

Modifiers

Modifier classes are necessary to add a specific style to panels. UIkit includes a number of panel modifiers and you also have the possibility to create your own.

Panel box

Add the .uk-panel-box class to create a visually styled box. This is the default panel modifier.

Example

Markup

<div class="uk-panel uk-panel-box">...</div>

NOTE To create a hover effect on the panel, just add the .uk-panel-box-hover class. This comes in handy when working with anchors.

---

Panel box primary

Add the .uk-panel-box-primary class to modify the box panel and emphasize it with a different color.

Example

Markup

<div class="uk-panel uk-panel-box uk-panel-box-primary">...</div>

NOTE To create a hover effect on the panel, just add the .uk-panel-box-primary-hover class. This comes in handy when working with anchors.

---

Panel box secondary

Add the .uk-panel-box-secondary class to modify the box panel and give it a white background.

Example

Markup

<div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div>

NOTE To create a hover effect on the panel, just add the .uk-panel-box-secondary-hover class. This comes in handy when working with anchors.

---

Panel hover

Add the .uk-panel-hover class to add a hover effect to the panel. This comes in handy when using the panel as an anchor.

Example

Markup

<a class="uk-panel uk-panel-hover" href="">...</a>

---

Panel header

Add the .uk-panel-header class to separate the panel title and content with a horizontal line.

Example

Markup

<div class="uk-panel uk-panel-header">...</div>

---

Panel space

Add the .uk-panel-space class to increase the spacing around the panel content.

Example

Markup

<div class="uk-panel uk-panel-space">...</div>

---

Panel divider

Add the .uk-panel-divider class to separate vertically stacked panels with lines.

Example

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-divider">...</div>
        <div class="uk-panel uk-panel-divider">...</div>
        <div class="uk-panel uk-panel-divider">...</div>
    </div>
</div>

NOTE Use the .uk-grid-divider class from the Grid component to separate grid columns.

---

Panel box with teaser

To display an image inside a panel box that is attached to the border of the panel without any spacing, just add the .uk-panel-teaser class to a <div> element inside the panel.

Example

Markup

<div class="uk-panel uk-panel-box">
    <div class="uk-panel-teaser">
        <img src="" alt="">
    </div>
</div>

---

Panel with icons

Easily apply an icon from our Icon component to your panel by adding one of the .uk-icon-* classes to an <i> or <span> element inside the panel title.

Example

Markup

<div class="uk-panel">
    <h3 class="uk-panel-title"><i class="uk-icon-*"></i>...</h3>
</div>

Dynamically transition through different content panes.

Usage

The switcher component consists of a number of toggles and their related content items. Add the data-uk-switcher="{connect:'#ID'}" attribute to the element which contains the toggles, targetting the same id as is used on the element containing the content items. Add the .uk-switcher class to the same element. Typically the switcher is combined with other components, some of which will be shown here.

Example

• Item
• Item
• Item

• Hello!
• Hello again!
• Bazinga!

Markup

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

---

Switch items from within content

In some cases you want to switch to another content section from within the active content. This is possible using the data-uk-switcher-item attribute. To target the items, you need to set the data attribute to the number of the respective content item.

Example

Markup

<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li> ... <a href="" data-uk-switcher-item="0">...</a></li>
    <li> ... <a href="" data-uk-switcher-item="1">...</a></li>
</ul>

Setting the attribute to next and previous will switch to the adjacent items.

Markup

<li> ... <a href="" data-uk-switcher-item="next">...</a></li>
<li> ... <a href="" data-uk-switcher-item="previous">...</a></li>

---

Connect multiple items

It is also possible to connect multiple content containers. Just extend the connect parameter with the ID of the additional container.

Example

Markup

<!-- This is the nav containing the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id-one, #my-id-two'}">
    <li><a href="">...</a></li>
</ul>

<!-- These are the containers of the content items -->
<ul id="my-id-one" class="uk-switcher">
    <li>...</li>
</ul>

<ul id="my-id-two" class="uk-switcher">
    <li>...</li>
</ul>

---

Animations

The Switcher component allows you to add different animations to items when toggling between them. All you need to do is add the animation parameter to the data-attribute and define the animation that you want to apply. Check the table below for an overview of the animations provided.

Example

Markup

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

---

Custom animations

You can also apply multiple animations by using the uk-animation-* classes from the Animation component. That way you can even create your own custom class to apply a different transition to the switcher.

Example

• Tab
• Tab
• Tab

• Hello!
• Hello again!
• Bazinga!

Markup

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id', animation: 'uk-animation-fade, uk-animation-slide-left'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

---

Switcher with subnav

The switcher is easily applied to the Subnav component.

Example

• Item
• Item
• Item

• Hello!
• Hello again!
• Bazinga!

Markup

<!-- This is the subnav containing the toggling elements -->
<ul class="uk-subnav uk-subnav-pill" data-uk-switcher="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
    <li>...</li>
</ul>

---

Switcher with tabs

As an exception to the rule, add the data-uk-tab="{connect:'#ID'}" attribute, using the parameter "tab" instead of "switcher", to the tabbed navigation to combine the switcher with the Tab component.

Example

Markup

<!-- This is the tabbed navigation containing the toggling elements -->
<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">
    <li>...</li>
</ul>

NOTE When using the tab bottom modifier, navigation and content need to be arranged in reversed order, so that the content appears above the tabs.

---

Vertical tab

Use the Grid component to display content correctly with a vertical tabbed navigation.

Example

Example

<!-- This is the left vertical tabbed navigation -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <!-- This is the vertical tabbed navigation containing the toggling elements -->
        <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#my-id'}">...</ul>
    </div>
    <div class="uk-width-medium-1-2">
        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

<!-- This is the right vertical tabbed navigation -->
<div class="uk-grid">
    <div class="uk-width-medium-1-2 uk-push-1-2">
        <!-- This is the vertical tabbed navigation containing the toggling elements -->
        <ul class="uk-tab uk-tab-right" data-uk-tab="{connect:'#my-id'}">...</ul>
    </div>
    <div class="uk-width-medium-1-2 uk-pull-1-2">
        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">...</ul>
    </div>
</div>

---

Switcher with buttons

The switcher can also be applied to buttons or button groups from the Button component. Just add the switcher data attribute to a <div> element around a group of buttons or to the element with the .button-group class.

Example

Markup

<!-- This is the container of the toggling buttons -->
<div data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>

<!-- This is the button group containing the toggling buttons -->
<div class="uk-button-group" data-uk-switcher="{connect:'#my-id'}">
    <button class="uk-button" type="button">...</button>
</div>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">...</ul>

---

Switcher with navs

To apply the switcher to the Nav component, add the data attribute to the nav <ul>. Use the Grid component to arrange nav and content in a grid layout.

Example

Markup

<div class="uk-grid">
    <div class="uk-width-medium-1-4">

        <!-- This is the nav containing the toggling elements -->
        <ul class="uk-nav uk-nav-side" data-uk-switcher="{connect:'#my-id'}">
            <li><a href="">...</a></li>
        </ul>
    </div>
    <div class="uk-width-medium-3-4">

        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">
            <li>...</li>
        </ul>
    </div>
</div>

---

JavaScript options

This is an example of how to set options via attribute:

data-uk-switcher="{active:1}"

Events

You can bind callbacks to following events for custom functionality:

Example

$('[data-uk-switcher]').on('show.uk.switcher', function(event, area){
    console.log("Switcher switched to ", area);
});

Trigger events and animations while scrolling your page.

Usage

The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element.

Typically, classes from the Animation component are used together with the scrollspy.

Examples

This example uses the repeat: true option. Scroll up and down to see the triggered animations.

Markup

<div data-uk-scrollspy="{cls:'uk-animation-fade'}">...</div>

<div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">...</div>

<div data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">...</div>

---

JavaScript options

This is an example of how to set options via attribute:

data-uk-scrollspy="{cls:'uk-animation-fade'}"

Events

You can bind callbacks to following events for custom functionality:

Example

$('[data-uk-scrollspy]').on('uk.scrollspy.inview', function(){
    // custom code...
});

---

Scrollspy Nav

To automatically update the active menu item in a menu depending on the scroll position of your site, just add the data attribute data-uk-scrollspy-nav to any navigation. Each menu item must link to the ID of its corresponding part of the site.

Markup

<ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">
    <li><a href="#MY-ID">...</a></li>
    <li><a href="#MY-ID2">...</a></li>
</ul>

<div id="MY-ID">...</div>
<div id="MY-ID2">...</div>

---

JavaScript options

This is an example of how to set options via attribute:

data-uk-scrollspy-nav="{smoothscroll:true}"

Events

Create modal dialogs with different styles and transitions.

Usage

The modal component consists of an overlay, a dialog and a close button.

You can use any element to toggle a modal dialog. An <a> element needs to be linked to the modal's id. To enable the necessary JavaScript, add the data-uk-modal attribute. If you are using another element, like a button, just add the data-uk-modal="{target:'#ID'}" attribute to target the modal's id.

Example

Open Open

Markup

<!-- This is an anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is a button toggling the modal -->
<button class="uk-button" data-uk-modal="{target:'#my-id'}">...</button>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        ...
    </div>
</div>

---

JavaScript options

By default, the modal closes automatically when clicking on the modal overlay. To prevent this from happening, just add the data-uk-modal="{target:'#ID',bgclose:false}" attribute.

---

Modal header and footer

You can create a header and footer for your modal, which are seperated from the content. Just add the .uk-modal-header or the .uk-modal-footer class to a <div> element inside the modal dialog.

Example

Open

Markup

<div class="uk-modal">
    <div class="uk-modal-dialog">
        <div class="uk-modal-header">...</div>
        ...
        <div class="uk-modal-footer">...</div>
    </div>
</div>

---

Modal caption

You can also create a caption that will be placed outside the modal. Just add the .uk-modal-caption class to a <div> element inside the modal dialog.

Example

Open

Markup

<div class="uk-modal">
    <div class="uk-modal-dialog">
        <div class="uk-modal-caption">...</div>
    </div>
</div>

---

Modal spinner

To place a spinning icon inside your modal, add the .uk-modal-spinner class to a <div> element inside the modal dialog.

Example

Open

Markup

<div class="uk-modal">
    <div class="uk-modal-dialog">
        <div class="uk-modal-spinner">...</div>
    </div>
</div>

---

Lightbox modifier

To create a lightbox-like modal dialog, just add the .uk-modal-dialog-lightbox class. This can be useful, if you want to use the modal as a lightbox for your images. The close button will adjust its position automatically to the dialog.

Example

Open

Markup

<!-- This is the anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-lightbox">
        <a href="" class="uk-modal-close uk-close uk-close-alt"></a>
        <img src="" alt="">
    </div>
</div>

NOTE When creating a close button within the lightbox modifier, we also recommend adding the .uk-close-alt class from the Close component to the close button to give your button a styling that fits the lightbox modal.

---

Center Modal

To vertically center the modal, add the {center:true} option to the data-attribute.

Example

Open

Markup

<a href="#my-id" data-uk-modal="{center:true}"></a>

---

Large dialog modifier

To apply the site's container width to the modal dialog, just add the .uk-modal-dialog-large class.

Example

Open

Markup

<div class="uk-modal-dialog uk-modal-dialog-large">...</div>

---

Overflow container in modal

You can also display the modal's content in a scrollable container. Just add the .uk-overflow-container class to a <div> element inside the modal dialog. The modal will automatically expand and fill the site's height.

Example

Open

Markup

<div class="uk-modal-dialog">
    <p>...</p>
    <div class="uk-overflow-container">...</div>
    <p>...</p>
</div>

---

JavaScript

You can handle modal dialogs via raw javascript.

Example

var modal = UIkit.modal(".modalSelector");

if ( modal.isActive() ) {
    modal.hide();
} else {
    modal.show();
}

---

Events

The modal component triggers an show.uk.modal event every time a modal is opened and hide.uk.modal when a modal is closed.

Example

$('.modalSelector').on({

    'show.uk.modal': function(){
        console.log("Modal is visible.");
    },

    'hide.uk.modal': function(){
        console.log("Element is not visible.");
    }
});

Events

Defines different styles for a toggleable dropdown.

Usage

Any content, like a button, can toggle a dropdown. Just wrap the toggle with a <div> element and add the data-uk-dropdown attribute. Add the .uk-dropdown class to a child <div> element to create the dropdown itself. A dropdown can be enabled by either hovering or clicking the the toggle.

IMPORTANT To apply a dropdown, it is important that a parent element has a relative position to align the dropdown properly. Many components create the position context by default, like the Button, Navbar, Subnav and the Tab component.

Example

NOTE In this example we are using a button from the Button component as a toggle.

Markup

<!-- This is the container enabling the JavaScript -->
<div data-uk-dropdown>

    <!-- This is the element toggling the dropdown -->
    <div>...</div>

    <!-- This is the dropdown -->
    <div class="uk-dropdown">...</div>

</div>

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

    <!-- This is the element toggling the dropdown -->
    <div>...</div>

    <!-- This is the dropdown -->
    <div class="uk-dropdown">...</div>

</div>

---

Delayed dropdowns in hover mode

You can set a delay parameter in milliseconds to prevent the immediate appearance of the dropdown.

Markup

<div class="uk-dropdown" data-uk-dropdown="{delay: 1000}">
    ...
</div>

---

Dropdown with navs

A dropdown can contain a nav from the Nav component. Just add the .uk-nav class and the .uk-nav-dropdown modifier to a <ul> element.

Markup

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

---

Alignment modifiers

Add one of the following classes to align the dropdown menu.

Example

Markup

<div class="uk-dropdown uk-dropdown-flip">
    ...
</div>

<div class="uk-dropdown uk-dropdown-up">
    ...
</div>

<div class="uk-dropdown uk-dropdown-center">
    ...
</div>

---

Justify dropdown

To justify a dropdown, just add the data-uk-dropdown="{justify:'#ID'}" attribute. The parent element, to which the dropdown should be justified, needs to have the target id, so the dropdown will expand to the full width of the targeted element.

Example

Markup

<!-- This is the parent element to which the dropdown is being justified -->
<div id="my-id">

    <!-- This is the container enabling the JavaScript -->
    <div class="uk-button-dropdown" data-uk-dropdown="{justify:'#my-id'}">

        <!-- This is the element toggling the dropdown -->
        <button class="uk-button">...</button>

        <!-- This is the dropdown -->
        <div class="uk-dropdown">...</div>
    </div>
</div>

---

Automatic dropdown flip

By default, the dropdown flips automatically when it exceeds the viewport's edge. If you want to flip it according to a container's boundary, just add the data-uk-dropdown="{boundary:'#ID'}" attribute, using a selector for the container.

Example

Markup

<div id="my-id">
    <div class="uk-button-dropdown" data-uk-dropdown="{boundary:'#my-id'}">...</div>
</div>

---

Grid

You can even place a grid from the Grid component inside a dropdown, which can hold a navigation or any other content. Just wrap the content with a <div> and add the .uk-grid class. To optimize the grid for use inside the dropdown, add the .uk-dropdown-grid class. Add one of the .uk-dropdown-width-* classes to the grid's child elements to multiply the dropdown's width by up to 5.

Example

Markup

<div class="uk-dropdown uk-dropdown-width-2">

    <div class="uk-grid uk-dropdown-grid">
        <div class="uk-width-1-2">
            <ul class="uk-nav uk-nav-dropdown uk-panel">...</ul>
            <div class="uk-panel">...</div>
        </div>

        <div class="uk-width-1-2">
            <div class="uk-panel">...</div>
        </div>
    </div>

</div>

Responsive behavior

In narrower viewports, like phones, there might not be enough space for the dropdown to expand. In that case the dropdown flips its alignment. Should there still not be enough space, the grid columns take up full width and stack vertically inside the dropdown.

---

Small modifier

By default, the dropdown has a fixed width and the text is wrapping into the next line. If you want your dropdown to be smaller, so that it extends to the width of its content without the text wrapping, add the .uk-dropdown-small class. This is useful for button dropdowns.

Example

Markup

<div class="uk-dropdown uk-dropdown-small">...</div>

---

Scrollable modifier

To give the dropdown a fixed height and enable its content to scroll, just add the .uk-dropdown-scrollable class.

Example

Markup

<div class="uk-dropdown uk-dropdown-scrollable">...</div>

---

Navbar modifier

Dropdowns are an essential part of a navbar from the Navbar component. Just add the .uk-dropdown-navbar class to the dropdown, so the dropdown fits perfectly into the navbar.

Example

Markup

<nav class="uk-navbar">
    <ul class="uk-navbar-nav">

        <!-- This is the container enabling the JavaScript -->
        <li class="uk-parent" data-uk-dropdown>

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

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

        </li>
    </ul>
</nav>

---

Dropdown in buttons

A button from the Button component can be used to trigger a dropdown menu.

Example

Markup

<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>

    <!-- This is the button toggling the dropdown -->
    <button class="uk-button">...</button>

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

</div>

---

Dropdown in button groups

Use button groups from the Button component to split buttons into a standard action and a dropdown toggle.

Example

Markup

<div class="uk-button-group">

    <!-- This is a button -->
    <button class="uk-button">...</button>

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

        <!-- This is the button toggling the dropdown -->
        <a href="" class="uk-button">...</a>

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

    </div>
</div>

---

Dropdown in subnavs

Dropdowns can also be applied to a subnav from the Subnav component.

Example

• Active
• Item
• More
  • Item
  • Another item
  • Header
  • Item
  • Another item
  • Separated item

Markup

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

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

        <!-- This is the nav 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>

---

Dropdown in tabs

Dropdowns can be used on a tab from the Tab component.

Example

• Tab One
• Tab Two
• More
  • Item
  • Another item
  • Header
  • Item
  • Another item
  • Separated item
• Tab One

Markup

<ul class="uk-tab" data-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>

---

JavaScript options

This is an example of how to set options via attribute:

data-uk-dropdown="{mode:'hover'}"

Events

You can bind callbacks to following events for custom functionality:

Example

$('[data-uk-dropdown]').on('show.uk.dropdown', function(){
    // custom code...
});