Simple Dashboard

Inspect the full details and code of a selected snippet

<div class="uk-background-primary uk-light uk-preserve-color uk-hidden@m" uk-sticky>
  <div class="uk-container">
    <nav class="uk-navbar" uk-navbar>
      <div class="uk-navbar-left">
        <a class="uk-navbar-toggle" uk-navbar-toggle-icon uk-toggle href="#offcanvas"></a>
      </div>
      <div class="uk-navbar-center">
        <a class="uk-navbar-item uk-logo" href="#">Dashboard</a>
      </div>
      <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
          <li>
            <a href="#">
              <img class="uk-border-circle" src="https://getuikit.com/docs/images/avatar.jpg" width="32" height="32" decoding="async" loading="eager" alt="Username" />
            </a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-nav">
                <li>
                  <a href="#"><span class="uk-margin-small-right" uk-icon="icon: user;"></span>Profile</a>
                </li>
                <li>
                  <a href="#"><span class="uk-margin-small-right" uk-icon="icon: settings;"></span>Settings</a>
                </li>
                <li class="uk-nav-divider"></li>
                <li>
                  <a href="#"><span class="uk-margin-small-right" uk-icon="icon: sign-out;"></span>Logout</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</div>

<header class="uk-background-primary uk-navbar-container uk-navbar-transparent uk-light uk-preserve-color uk-visible@m" uk-sticky>
  <div class="uk-container uk-container-expand">
    <nav class="uk-navbar" uk-navbar>
      <div class="uk-navbar-left">
        <a class="uk-navbar-item uk-logo" href="#">Dashboard</a>
      </div>
      <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
          <li>
            <a class="uk-navbar-toggle" uk-search-icon href="#"></a>
            <div class="uk-drop" uk-drop="mode: click; pos: left-center; offset: 0;">
              <form class="uk-search uk-search-medium uk-width-1-1">
                <input class="uk-search-input" type="search" placeholder="Search..." aria-label="Search" autofocus />
              </form>
            </div>
          </li>
        </ul>
        <ul class="uk-navbar-nav">
          <li>
            <a class="uk-navbar-item" href="#"> <img class="uk-border-circle" src="https://getuikit.com/docs/images/avatar.jpg" width="32" height="32" alt="Username" /></a>
            <div class="uk-navbar-dropdown">
              <ul class="uk-nav uk-navbar-dropdown-nav">
                <li>
                  <a href="#"><span class="uk-margin-small-right" uk-icon="icon: user;"></span>Profile</a>
                </li>
                <li>
                  <a href="#"><span class="uk-margin-small-right" uk-icon="icon: settings;"></span>Settings</a>
                </li>
                <li class="uk-nav-divider"></li>
                <li>
                  <a href="#"><span class="uk-margin-small-right" uk-icon="icon: sign-out;"></span>Logout</a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

<div class="uk-grid uk-grid-collapse">
  <aside class="uk-width-medium uk-position-relative uk-visible@m">
    <div class="uk-tile uk-tile-default uk-tile-small uk-width-medium uk-position-fixed uk-box-shadow-medium" uk-overflow-auto style="top: 80px; bottom: 0">
      <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
        <li class="uk-nav-header">Navigation</li>
        <li><a href="#">Dashboard</a></li>
        <li class="uk-nav-header">Submenus</li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </aside>

<main class="uk-section uk-section-small uk-section-muted uk-width-expand">
    <div class="uk-container uk-container-expand">
      <h1>Dashboard</h1>
      <div class="uk-child-width-1-1 uk-child-width-1-2@m uk-child-width-1-3@l" uk-grid>
        <div class="uk-width-1-1">
          <div class="uk-card uk-card-default uk-card-body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ipsam amet enim quidem voluptatibus expedita minima fuga quia ducimus veniam rerum culpa, tenetur consectetur, accusamus, obcaecati sint voluptatem delectus quae.</p>
          </div>
        </div>
        <div class="uk-width-1-2@m uk-position-relative">
          <div class="uk-card uk-card-default uk-card-body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ipsam amet enim quidem voluptatibus expedita minima fuga quia ducimus veniam rerum culpa, tenetur consectetur, accusamus, obcaecati sint voluptatem delectus quae.</p>
          </div>
        </div>
        <div class="uk-width-1-2@m">
          <div class="uk-card uk-card-default uk-card-body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ipsam amet enim quidem voluptatibus expedita minima fuga quia ducimus veniam rerum culpa, tenetur consectetur, accusamus, obcaecati sint voluptatem delectus quae.</p>
          </div>
        </div>
        <div>
          <div class="uk-card uk-card-default uk-card-body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ipsam amet enim quidem voluptatibus expedita minima fuga quia ducimus veniam rerum culpa, tenetur consectetur, accusamus, obcaecati sint voluptatem delectus quae.</p>
          </div>
        </div>
        <div>
          <div class="uk-card uk-card-default uk-card-body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ipsam amet enim quidem voluptatibus expedita minima fuga quia ducimus veniam rerum culpa, tenetur consectetur, accusamus, obcaecati sint voluptatem delectus quae.</p>
          </div>
        </div>
        <div>
          <div class="uk-card uk-card-default uk-card-body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ipsam amet enim quidem voluptatibus expedita minima fuga quia ducimus veniam rerum culpa, tenetur consectetur, accusamus, obcaecati sint voluptatem delectus quae.</p>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>

<div id="offcanvas" uk-offcanvas="overlay: true;">
  <div class="uk-offcanvas-bar">
    <button class="uk-offcanvas-close" type="button" uk-close></button>
      <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
        <li class="uk-nav-header">Navigation</li>
        <li><a href="#">Dashboard</a></li>
        <li class="uk-nav-header">Submenus</li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
        <li class="uk-parent">
          <a href="#"><span class="uk-margin-small-right" uk-icon="icon: table;"></span>Menu <span uk-nav-parent-icon></span></a>
          <ul class="uk-nav-sub">
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
            <li><a href="#">Submenu</a></li>
          </ul>
        </li>
      </ul>
  </div>
</div>

Information

Detailed overview of a selected code snippet

yaneony

28.03.2025, 11:49:24

03.04.2025, 11:26:28

uk-background, uk-border, uk-box, uk-card, uk-child, uk-close, uk-container, uk-drop, uk-grid, uk-hidden, uk-icon, uk-light, uk-logo, uk-margin, uk-nav, uk-navbar, uk-offcanvas, uk-overflow, uk-parent, uk-position, uk-preserve, uk-search, uk-section, uk-sticky, uk-tile, uk-toggle, uk-visible, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!