Visibility

Use responsive visibility classes to display or hide elements on different devices.

Usage

Add one of these classes to hide an element.

Class Description
.uk-hidden Hides the element on any device. This is more of a legacy class. The recommended way to do this, is to use the hidden attribute.
.uk-invisible Hides the element without removing it from the document flow.
<div hidden></div>

<div class="uk-invisible"></div>

Responsive

This component provides responsive classes to hide or display elements on different viewports.

Hidden

Add one of the .uk-hidden-* classes to hide the element from screens larger than a specified width.

Class Description
uk-hidden@s Only affects device widths of 640px and larger.
uk-hidden@m Only affects device widths of 960px and larger.
uk-hidden@l Only affects device widths of 1200px and larger.
uk-hidden@xl Only affects device widths of 1600px and larger.
<!-- Hidden on tablets and larger -->
<div class="uk-hidden@m"></div>

Note In this example the green elements are hidden on screens that are larger than the defined breakpoint. Resize your browser window to see the effect.

  • ✔ Small
    Small
    ✔ Medium
    Medium
    ✔ Large
    Large
    ✔ X-Large
    X-Large
  • <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-grid>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove uk-alert-success">✔ Small</div>
                <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@s">Small</div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove uk-alert-success">✔ Medium</div>
                <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@m">Medium</div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove uk-alert-success">✔ Large</div>
                <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@l">Large</div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove uk-alert-success">✔ X-Large</div>
                <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden@xl">X-Large</div>
            </div>
        </div>
    </div>

Visible

Use .uk-visible-* classes to show the element for screens larger than the specified width.

Class Description
uk-visible@s Only affects device widths of 640px and larger.
uk-visible@m Only affects device widths of 960px and larger.
uk-visible@l Only affects device widths of 1200px and larger.
uk-visible@xl Only affects device widths of 1600px and larger.
<!-- Visible on tablets and larger -->
<div class="uk-visible@m"></div>

Note In this example the green elements are displayed on screens that are larger than the defined breakpoint. Resize your browser window to see the effect.

  • Small
    ✔ Small
    Medium
    ✔ Medium
    Large
    ✔ Large
    X-Large
    ✔ X-Large
  • <div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-4@s uk-text-center" uk-grid>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove">Small</div>
                <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@s">✔ Small</div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove">Medium</div>
                <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@m">✔ Medium</div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove">Large</div>
                <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@l">✔ Large</div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove">X-Large</div>
                <div class="uk-alert uk-alert-success uk-position-cover uk-margin-remove uk-visible@xl">✔ X-Large</div>
            </div>
        </div>
    </div>

Toggle

To display elements on hover or focus only, add the .uk-visible-toggle class to a parent element and one of the following classes to any child elements which should be hidden.

Class Description
.uk-hidden-hover The element is removed from the document flow when hidden.
.uk-invisible-hover The element is not removed from the document flow when hidden.

The child elements will be displayed when the parent element is hovered or focused. Add tabindex="0" to the parent element to allow it to receive focus through keyboard navigation and on touch devices.

If there are a or button elements within the hidden child element, they are already focusable through keyboard navigation and will make the child element appear. Therefore, add tabindex="-1" so the parent element is still focusable on touch devices.

<div class="uk-visible-toggle" tabindex="0">
    <div class="uk-hidden-hover"></div>
</div>
  • Hidden when not hovered

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Invisible when not hovered

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • <div class="uk-child-width-1-2@s" uk-grid>
        <div class="uk-visible-toggle" tabindex="-1">
    
            <h4>Hidden when not hovered</h4>
    
            <div uk-grid>
                <div class="uk-width-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                <div class="uk-width-auto">
                    <ul class="uk-hidden-hover uk-iconnav">
                        <li><a href="#" uk-icon="icon: pencil"></a></li>
                        <li><a href="#" uk-icon="icon: copy"></a></li>
                        <li><a href="#" uk-icon="icon: trash"></a></li>
                    </ul>
                </div>
            </div>
    
        </div>
        <div class="uk-visible-toggle" tabindex="-1">
    
            <h4>Invisible when not hovered</h4>
    
            <div uk-grid>
                <div class="uk-width-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                <div class="uk-width-auto">
                    <ul class="uk-invisible-hover uk-iconnav">
                        <li><a href="#" uk-icon="icon: pencil"></a></li>
                        <li><a href="#" uk-icon="icon: copy"></a></li>
                        <li><a href="#" uk-icon="icon: trash"></a></li>
                    </ul>
                </div>
            </div>
    
        </div>
    </div>

Touch

Add the .uk-hidden-touch class to hide elements on touch devices and the .uk-hidden-notouch to hide elements on devices without a touch screen.

<!-- Hidden on touch devices -->
<div class="uk-hidden-touch"></div>

<!-- Hidden on no-touch devices -->
<div class="uk-hidden-notouch"></div>
  • ✔ Hidden Touch
    Hidden Touch
    ✔ Hidden No-Touch
    Hidden No-Touch
  • <div class="uk-grid-small uk-child-width-1-2 uk-child-width-auto@s uk-text-center" uk-grid>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden Touch</div>
                <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-touch">Hidden Touch</div>
            </div>
        </div>
        <div>
            <div class="uk-panel">
                <div class="uk-alert uk-margin-remove uk-alert-success">✔ Hidden No-Touch</div>
                <div class="uk-alert uk-position-cover uk-margin-remove uk-hidden-notouch">Hidden No-Touch</div>
            </div>
        </div>
    </div>