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.

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 768px and larger.
`uk-hidden@l`	Only affects device widths of 1024px and larger.
`uk-hidden@xl`	Only 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.

✔ 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.

Class	Description
`uk-visible@s`	Only affects device widths of 640px and larger.
`uk-visible@m`	Only affects device widths of 768px and larger.
`uk-visible@l`	Only affects device widths of 1024px and larger.
`uk-visible@xl`	Only 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.

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.

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-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>

✔ 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 Name	Affected Classes
`hook-misc`	`*`