Visibility

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

Notice

This documentation is a work in progress.

Usage

Add one of these classes to hide an element.

ClassDescription
.uk-hiddenHides 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-invisibleHides 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.

ClassDescription
uk-hidden@sOnly affects device widths of 640px and larger.
uk-hidden@mOnly affects device widths of 768px and larger.
uk-hidden@lOnly affects device widths of 1024px and larger.
uk-hidden@xlOnly affects device widths of 1280px 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.

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

Visible

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

ClassDescription
uk-visible@sOnly affects device widths of 640px and larger.
uk-visible@mOnly affects device widths of 768px and larger.
uk-visible@lOnly affects device widths of 1024px and larger.
uk-visible@xlOnly affects device widths of 1280px 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.

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

ClassDescription
.uk-hidden-hoverThe element is removed from the document flow when hidden.
.uk-invisible-hoverThe 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>
Copy to clipboard
  • 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-iconnav uk-hidden-hover">
              <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-iconnav uk-invisible-hover">
              <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>
Copy to clipboard
  • ✔ Hidden Touch
    Hidden Touch
    ✔ Hidden No-Touch
    Hidden No-Touch
  • <div
      class="uk-child-width-auto@s uk-grid-small uk-text-center uk-child-width-1-2"
      uk-grid
    >
      <div>
        <div class="uk-panel">
          <div class="uk-alert-success uk-alert uk-margin-remove">
            ✔ Hidden Touch
          </div>
          <div class="uk-alert uk-margin-remove uk-position-cover uk-hidden-touch">
            Hidden Touch
          </div>
        </div>
      </div>
      <div>
        <div class="uk-panel">
          <div class="uk-alert-success uk-alert uk-margin-remove">
            ✔ Hidden No-Touch
          </div>
          <div
            class="uk-alert uk-margin-remove uk-position-cover uk-hidden-notouch"
          >
            Hidden No-Touch
          </div>
        </div>
      </div>
    </div>

Theme development

On your tailwind.config.js file, add the Visibility component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        visibility: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*