• Typography
  • Buttons
  • Inputs
  • Controls
  • Navigation
  • Notifications
  • Boxes
  • Tables
  • Icons
  • Media
  • Components
    • Generic
    • Showcase
    • View the code

      Simple Horizontal Menu

      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
      • Menu Item 5
       
      <ul class="menu-list">
          <li class="item">
              <a title="Menu Item 1" class="link" href="#">Menu Item 1</a>
          </li>
          <li class="item">
              <a title="Menu Item 2" class="link" href="#">Menu Item 2</a>
          </li>
          <li class="item">
              <a title="Menu Item 3" class="link" href="#">Menu Item 3</a>
          </li>
          <li class="item">
              <a title="Menu Item 4" class="link" href="#">Menu Item 4</a>
          </li>
          <li class="item">
              <a title="Menu Item 5" class="link" href="#">Menu Item 5</a>
          </li>
      </ul>
    • View the code
      • Home
      • About
      • Products
      • Pricing
      • Contact
       
      <ul class="menu-list">
          <li class="item">
              <a title="Home" class="link" href="#">Home</a>
          </li>
          <li class="item">
              <a title="About" class="link" href="#">About</a>
          </li>
          <li class="item">
              <a title="Products" class="link" href="#">Products</a>
          </li>
          <li class="item">
              <a title="Pricing" class="link" href="#">Pricing</a>
          </li>
          <li class="item">
              <a title="Contact" class="link" href="#">Contact</a>
          </li>
      </ul>
    • Generic
    • Showcase
    • View the code

      Simple Vertical Menu

      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
      • Menu Item 5
       
      <ul class="menu-list vertical">
          <li class="item">
              <a title="Menu Item 1" class="link" href="#">Menu Item 1 <span class="icon main left"></span></a>
          </li>
          <li class="item">
              <a title="Menu Item 2" class="link" href="#">Menu Item 2 <span class="icon main left"></span></a>
          </li>
          <li class="item">
              <a title="Menu Item 3" class="link" href="#">Menu Item 3 <span class="icon main left"></span></a>
          </li>
          <li class="item">
              <a title="Menu Item 4" class="link" href="#">Menu Item 4 <span class="icon main left"></span></a>
          </li>
          <li class="item">
              <a title="Menu Item 5" class="link" href="#">Menu Item 5 <span class="icon main left"></span></a>
          </li>
      </ul>
    • View the code

      IT Products

      • Notebooks
      • Desktops
      • Components
      • Peripherals
      • Networking
       
      <h4>IT Products</h4>
      <ul class="menu-list vertical">
          <li class="item notebooks">
              <a title="Notebooks" class="link" href="#">Notebooks <span class="icon main left"></span></a>
          </li>
          <li class="item desktops">
              <a title="Desktops" class="link" href="#">Desktops <span class="icon main left"></span></a>
          </li>
          <li class="item components">
              <a title="Components" class="link" href="#">Components <span class="icon main left"></span></a>
          </li>
          <li class="item peripherals">
              <a title="Peripherals" class="link" href="#">Peripherals <span class="icon main left"></span></a>
          </li>
          <li class="item networking">
              <a title="Networking" class="link" href="#">Networking <span class="icon main left"></span></a>
          </li>
      </ul>
  • View the code

    UIKit Accordion Menu with Multiple Openings

    • Menu Item 1
    • Menu Item 2
      • Submenu Item 1
      • Submenu Item 2
      • Submenu Item 3
    • Menu Item 3
      • Submenu Item 1
      • Submenu Item 2
      • Submenu Item 3
      • Submenu Item 4
        • Submenu Level 2 Item 1
        • Submenu Level 2 Item 2
     
    <div class="uikit-component">
        <ul class="menu vertical uk-nav" data-uk-nav="{multiple: true}">
            <li class="item">
                <a title="Menu Item" class="link" href="#">Menu Item 1</a>
            </li>
            <li class="item uk-parent">
                <a title="Open Submenu" class="link" href="#">Menu Item 2 <span class="icon right"></span></a>
                <ul class="uk-nav-sub">
                    <li class="item">
                        <a title="Submenu Item" class="link" href="#">Submenu Item 1</a>
                    </li>
                    <li class="item">
                        <a title="Submenu Item" class="link" href="#">Submenu Item 2</a>
                    </li>
                    <li class="item">
                        <a title="Submenu Item" class="link" href="#">Submenu Item 3</a>
                    </li>
                </ul>
            </li>
            <li class="item uk-parent">
                <a title="Open Submenu" class="link" href="#">Menu Item 3 <span class="icon right"></span></a>
                <ul class="uk-nav-sub">
                    <li class="item">
                        <a title="Submenu Item" class="link" href="#">Submenu Item 1</a>
                    </li>
                    <li class="item">
                        <a title="Submenu Item" class="link" href="#">Submenu Item 2</a>
                    </li>
                    <li class="item">
                        <a title="Submenu Item" class="link" href="#">Submenu Item 3</a>
                    </li>
                    <li class="item uk-parent">
                        <a title="Submenu Item" class="link" href="#">Submenu Item 4</a>
                        <ul class="uk-nav-sub">
                            <li class="item">
                                <a title="Submenu Item" class="link" href="#">Submenu Level 2 Item 1</a>
                            </li>
                            <li class="item">
                                <a title="Submenu Item" class="link" href="#">Submenu Level 2 Item 2</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
  • View the code

    UIKit Navbar

    • Navbar Item
    • Navbar Item 2
    • Navbar Item 3
      • Navbar Subitem 1
      • Navbar Subitem 2
      • Navbar Subitem 3
      • Navbar Subitem 4
     
    <div class="uikit-component">
        <nav class="uk-navbar">
            <ul class="uk-navbar-nav">
                <li class="item uk-active">
                    <a href="#" title="Navbar Item">Navbar Item</a>
                </li>
                <li class="item">
                    <a href="#" title="Navbar Item">Navbar Item 2</a>
                </li>
                <li class="item uk-parent" data-uk-dropdown>
                    <a href="#" title="Navbar Item">Navbar Item 3 <span class="icon right"></span></a>
                    <div class="uk-dropdown uk-dropdown-navbar">
                        <ul class="uk-nav uk-nav-navbar">
                            <li class="item">
                                <a href="#" title="Navbar Subitem">Navbar Subitem 1</a>
                            </li>
                            <li class="item">
                                <a href="#" title="Navbar Subitem">Navbar Subitem 2</a>
                            </li>
                            <li class="item uk-nav-divider"></li>
                            <li class="item">
                                <a href="#" title="Navbar Subitem">Navbar Subitem 3</a>
                            </li>
                            <li class="item">
                                <a href="#" title="Navbar Subitem">Navbar Subitem 4</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
    • Generic
    • Showcase
    • View the code

      Breadcrumbs

      • Item 1
      • Item 2
      • Item 3
      • Item 4
       
      <ul class="menu breadcrumb">
          <li class="item">
              <a href="#" class="link" title="Go to Item 1">Item 1 <span class="icon"></span></a>
          </li>
          <li class="item">
              <a href="#" class="link" title="Go to Item 2">Item 2 <span class="icon"></span></a>
          </li>
          <li class="item">
              <a href="#" class="link" title="Go to Item 3">Item 3 <span class="icon"></span></a>
          </li>
          <li class="item active">
              <span>Item 4</span>
          </li>
      </ul>
    • View the code

      13" Ultrabooks

      • Products
      • Notebooks
      • Ultrabooks
      • 13"
       
      <h4>13" Ultrabooks</h4>
      <ul class="breadcrumb">
          <li class="item products">
              <a href="#" class="link" title="Go to Products">Products <span class="icon"></span></a>
          </li>
          <li class="item notebooks">
              <a href="#" class="link" title="Go to Notebooks">Notebooks <span class="icon"></span></a>
          </li>
          <li class="item ultrabooks">
              <a href="#" class="link" title="Go to Ultrabooks">Ultrabooks <span class="icon"></span></a>
          </li>
          <li class="item 13-inch active">
              <span>13"</span>
          </li>
      </ul>
    • Generic
    • Showcase
    • View the code

      Button Pagination

      • «
      • 1
      • 2
      • 3
      • 4
      • 5
      • »
       
      <ul class="pagination">
          <li class="item disabled">
              <a href="#" class="button">«</a>
          </li>
          <li class="item active">
              <a href="#" class="button">1</a>
          </li>
          <li class="item">
              <a href="#" class="button">2</a>
          </li>
          <li class="item">
              <a href="#" class="button">3</a>
          </li>
          <li class="item">
              <a href="#" class="button">4</a>
          </li>
          <li class="item">
              <a href="#" class="button">5</a>
          </li>
          <li class="item">
              <a href="#" class="button">»</a>
          </li>
      </ul>
    • View the code

      Go to page

      • «
      • 1
      • 2
      • 3
      • »
       
      <h4>Go to page</h4>
      <ul class="pagination">
          <li class="item">
              <a href="#" class="button">«</a>
          </li>
          <li class="item">
              <a href="#" class="button">1</a>
          </li>
          <li class="item">
              <a href="#" class="button">2</a>
          </li>
          <li class="item active">
              <a href="#" class="button">3</a>
          </li>
          <li class="item disabled">
              <a href="#" class="button">»</a>
          </li>
      </ul>
    • Generic
    • Showcase
    • View the code

      Link Pagination

      • «
      • 1
      • 2
      • 3
      • 4
      • 5
      • »
       
      <ul class="pagination">
          <li class="item disabled">
              <a href="#" class="link">«</a>
          </li>
          <li class="item active">
              <a href="#" class="link">1</a>
          </li>
          <li class="item">
              <a href="#" class="link">2</a>
          </li>
          <li class="item">
              <a href="#" class="link">3</a>
          </li>
          <li class="item">
              <a href="#" class="link">4</a>
          </li>
          <li class="item">
              <a href="#" class="link">5</a>
          </li>
          <li class="item">
              <a href="#" class="link">»</a>
          </li>
      </ul>
    • View the code

      Go to page

      • «
      • 1
      • 2
      • 3
      • »
       
      <h4>Go to page</h4>
      <ul class="pagination">
          <li class="item">
              <a href="#" class="link">«</a>
          </li>
          <li class="item">
              <a href="#" class="link">1</a>
          </li>
          <li class="item">
              <a href="#" class="link">2</a>
          </li>
          <li class="item active">
              <a href="#" class="link">3</a>
          </li>
          <li class="item disabled">
              <a href="#" class="link">»</a>
          </li>
      </ul>
  • View the code

    Pagination with Separator

    • «
    • 1
    • 2
    • 3
    • 4
    • 5
    • ...
    • 15
    • »
     
    <ul class="pagination">
        <li class="item disabled">
            <a href="#" class="link">«</a>
        </li>
        <li class="item active">
            <a href="#" class="link">1</a>
        </li>
        <li class="item">
            <a href="#" class="link">2</a>
        </li>
        <li class="item">
            <a href="#" class="link">3</a>
        </li>
        <li class="item">
            <a href="#" class="link">4</a>
        </li>
        <li class="item">
            <a href="#" class="link">5</a>
        </li>
        <li class="item separator">
            <span>...</span>
        </li>
        <li class="item">
            <a href="#" class="link">15</a>
        </li>
        <li class="item">
            <a href="#" class="link">»</a>
        </li>
    </ul>
  • View the code

    UIKit Dynamic Pagination

       
      <ul class="pagination uk-pagination" data-uk-pagination="{items:1000, itemsOnPage:10, currentPage:50}"></ul>
    • View the code

      Page Navigation

      • Previous
      • Next
       
      <ul class="pagination">
              <li class="item left">
                  <a href="#" class="button">Previous</a>
              </li>
              <li class="item right">
                  <a href="#" class="button">Next</a>
              </li>
          </ul>
      • Generic
      • Showcase
      • View the code

        UIKit Off-Canvas

        Toggle Off-Canvas

        Title

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at consequat massa. Integer felis purus, euismod nec tempor sed, cursus vel ante. Sed posuere ut mauris posuere lacinia. Pellentesque id justo ut leo fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed nisi sit amet ligula ornare commodo. Sed vitae feugiat justo. Nunc eget mollis dui. Maecenas lobortis purus sed nisl vulputate, tempor consequat urna viverra. Ut id consectetur metus, eget gravida diam.

         
        <div class="uikit-component">
            <a class="button" href="#uikit-off-canvas" data-uk-offcanvas>Toggle Off-Canvas</a>
            <div id="uikit-off-canvas" class="uk-offcanvas">
                <div class="uk-offcanvas-bar">
                    <div class="content">
                        <h1>Title</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at consequat massa. Integer felis purus, euismod nec tempor sed, cursus vel ante. Sed posuere ut mauris posuere lacinia. Pellentesque id justo ut leo fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed nisi sit amet ligula ornare commodo. Sed vitae feugiat justo. Nunc eget mollis dui. Maecenas lobortis purus sed nisl vulputate, tempor consequat urna viverra. Ut id consectetur metus, eget gravida diam. </p>
                    </div>
                </div>
            </div>
        </div>
      • View the code
        Open Menu
        • Menu Item 1
        • Menu Item 2
        • Menu Item 3
         
        <div class="uikit-component">
            <a class="button" href="#uikit-off-canvas-example" data-uk-offcanvas>Open Menu</a>
            <div id="uikit-off-canvas-example" class="uk-offcanvas">
                <div class="uk-offcanvas-bar">
                    <ul class="menu vertical">
                        <li class="item">
                            <a title="Menu Item 1" class="link" href="#">Menu Item 1 <span class="icon right"></span></a>
                        </li>
                        <li class="item">
                            <a title="Menu Item 2" class="link" href="#">Menu Item 2 <span class="icon right"></span></a>
                        </li>
                        <li class="item">
                            <a title="Menu Item 3" class="link" href="#">Menu Item 3 <span class="icon right"></span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
      • Generic
      • Showcase
      • View the code

        UIKit Right Off-Canvas

        Toggle Right Off-Canvas

        Title

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at consequat massa. Integer felis purus, euismod nec tempor sed, cursus vel ante. Sed posuere ut mauris posuere lacinia. Pellentesque id justo ut leo fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed nisi sit amet ligula ornare commodo. Sed vitae feugiat justo. Nunc eget mollis dui. Maecenas lobortis purus sed nisl vulputate, tempor consequat urna viverra. Ut id consectetur metus, eget gravida diam.

         
        <div class="uikit-component">
            <a class="button" href="#uikit-right-off-canvas" data-uk-offcanvas>Toggle Right Off-Canvas</a>
            <div id="uikit-right-off-canvas" class="uk-offcanvas">
                <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
                    <div class="content">
                        <h1>Title</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at consequat massa. Integer felis purus, euismod nec tempor sed, cursus vel ante. Sed posuere ut mauris posuere lacinia. Pellentesque id justo ut leo fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed nisi sit amet ligula ornare commodo. Sed vitae feugiat justo. Nunc eget mollis dui. Maecenas lobortis purus sed nisl vulputate, tempor consequat urna viverra. Ut id consectetur metus, eget gravida diam. </p>
                    </div>
                </div>
            </div>
        </div>
      • View the code
        Open Menu
        • Menu Item 1
        • Menu Item 2
        • Menu Item 3
         
        <div class="uikit-component">
            <a class="button" href="#uikit-right-off-canvas-example" data-uk-offcanvas>Open Menu</a>
            <div id="uikit-right-off-canvas-example" class="uk-offcanvas">
                <div class="uk-offcanvas-bar uk-offcanvas-bar-flip">
                    <ul class="menu vertical">
                        <li class="item">
                            <a title="Menu Item 1" class="link" href="#">Menu Item 1 <span class="icon right"></span></a>
                        </li>
                        <li class="item">
                            <a title="Menu Item 2" class="link" href="#">Menu Item 2 <span class="icon right"></span></a>
                        </li>
                        <li class="item">
                            <a title="Menu Item 3" class="link" href="#">Menu Item 3 <span class="icon right"></span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    • View the code

      UIKit Bottom Smooth Scroll

       
      <div class="uikit-component">
          <a href="#main-footer" data-uk-smooth-scroll class="button trigger only-icon bottom" title="Scroll to Bottom"><span class="icon"></span></a>
      </div>
      
    • View the code

      UIKit Top Smooth Scroll

       
      <div class="uikit-component">
          <a href="#top" data-uk-smooth-scroll class="button trigger only-icon top" title="Scroll to Top"><span class="icon"></span></a>
      </div>
    • View the code

      UIKit Offset (before the target) Smooth Scroll

       
      <div class="uikit-component">
          <a href="#navigation-12-1" data-uk-smooth-scroll="{offset: 100}" class="button trigger only-icon top" title="Scroll to Specific Element and Offset it"><span class="icon"></span></a>
      </div>
    • View the code

      UIKit Negative (after the target) Offset Smooth Scroll

       
      <div class="uikit-component">
          <a href="#navigation-12-1" data-uk-smooth-scroll="{offset: -100}" class="button trigger only-icon top" title="Scroll to Specific Element and Offset it"><span class="icon"></span></a>
      </div>
    Blackhole - Released under MIT license