Accordion

Create a list of items, allowing each item's content to be expanded and collapsed by clicking its header.

Usage

To apply the Accordion component, add the uk-accordion class and the data-uk-accordion attribute to a container element. Add the uk-accordion-content class to each of the content sections within the container. Finally, add the uk-accordion-title class to any element, like a heading, above the content section to create a toggle.

Example

Markup

<div class="uk-accordion" data-uk-accordion>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

</div>

Muliple open items

To display multiple content sections at the same time without one collapsing when the other one is opened, add the {collapse: false} option to the date attribute.

Example

JavaScript options

Init element manually

var accordion = UIkit.accordion(element, { /* options */ });

Events

Navbar

Defines different styles for the navigation bar.

Usage

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

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.

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.

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>

Navbar with dropdowns

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

Animation

A basic collection of smooth animations to use within your page.

Usage

To apply this component, add any .uk-animation-* class to an element and it will fade in with a nice animation. These classes are commonly set by using JavaScript to apply the animation to specific behaviors.

Example

Click on any of the boxes to see the animation.

Markup

<div class="uk-animation-fade">...</div>

Reverse modifier

By default, all aimations are incoming. To reverse any animation, add the .uk-animation-reverse class.

Example

Click on any of the boxes to see the animation.

Markup

<div class="uk-animation-fade uk-animation-reverse">...</div>

Duration modifier

To stretch the animation duration to 15 seconds, add the .uk-animation-15 class.

Example

Markup

<div class="uk-animation-slide-right uk-animation-15">...</div>

Origin modifier

By default, scaling animations originate from the center. To modify this behavior, add one of these classes.

Example

Click on any of the boxes to see the animation.

Animation hover

To trigger an animation on hover, just add the .uk-animation-hover class to the animated element itself or to a container.

Example

Markup

<div class="uk-animation-hover uk-animation-fade">...</div>

<div class="uk-animation-hover">
    <div class="uk-animation-slide-right">...</div>
</div>

Panel

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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>