tessl/npm-uikit

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

—

Pending

Overview

Eval results

Files

Navigation Components

Name: tessl/npm-uikit
Author: tessl

UIkit's navigation components provide comprehensive navigation systems including navbars, menus, breadcrumbs, and pagination for site navigation and wayfinding.

Capabilities

Navbar

Responsive navigation bar component with multiple sections and dropdown support.

/* Navbar Container */
.uk-navbar-container {
  /* Main navbar container with background and padding */
  background: #fff;
  position: relative;
}

/* Navbar Structure */
.uk-navbar {
  /* Navbar flex container */
  display: flex;
  position: relative;
}

.uk-navbar-left { /* Left navbar section */ }
.uk-navbar-center { /* Center navbar section */ }  
.uk-navbar-right { /* Right navbar section */ }

/* Navbar Items */
.uk-navbar-nav {
  /* Navbar navigation list */
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-navbar-nav > li {
  /* Navbar navigation list item */
  position: relative;
}

.uk-navbar-nav > li > a {
  /* Navbar navigation link */
  display: block;
  padding: 0 15px;
  color: #666;
  text-decoration: none;
}

.uk-navbar-item {
  /* Generic navbar item (logo, text, etc.) */
  display: block;
  padding: 0 15px;
}

.uk-navbar-toggle {
  /* Mobile navbar toggle button */
  display: none;
}

/* Navbar Variants */
.uk-navbar-transparent { /* Transparent navbar background */ }
.uk-navbar-sticky { /* Sticky navbar behavior */ }

/* Mobile Navbar */
@media (max-width: 959px) {
  .uk-navbar-toggle {
    display: block;
  }
}

JavaScript API:

/**
 * Navbar component for responsive navigation behavior
 */
UIkit.navbar(element: HTMLElement, options?: {
  /** Navbar alignment */
  align?: 'left' | 'center' | 'right';
  /** Dropdown mode */
  mode?: 'click' | 'hover';
  /** Dropdown duration */
  duration?: number;
  /** Boundary element */
  boundary?: string | HTMLElement;
  /** Boundary alignment */
  'boundary-align'?: boolean;
  /** Dropdown offset */
  offset?: number;
}): NavbarComponent;

interface NavbarComponent {
  /** Navbar element */
  $el: HTMLElement;
}

Usage Examples:

<!-- Basic Navbar -->
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
        <a class="uk-navbar-item uk-logo" href="#">Logo</a>
        <ul class="uk-navbar-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
    <div class="uk-navbar-right">
        <ul class="uk-navbar-nav">
            <li><a href="#">Login</a></li>
        </ul>
    </div>
</nav>

<!-- Navbar with Dropdown -->
<nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
        <ul class="uk-navbar-nav">
            <li>
                <a href="#">Parent</a>
                <div class="uk-navbar-dropdown">
                    <ul class="uk-nav uk-navbar-dropdown-nav">
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-nav-header">Header</li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-nav-divider"></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</nav>

Nav

Flexible navigation lists with multiple styling variants.

/* Nav Base */
.uk-nav {
  /* Base navigation list */
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-nav > li > a {
  /* Navigation link styling */
  display: block;
  text-decoration: none;
  color: #999;
}

.uk-nav > li.uk-active > a {
  /* Active navigation item */
  color: #333;
}

/* Nav Variants */
.uk-nav-default { /* Default nav styling */ }
.uk-nav-primary { /* Primary nav with accent color */ }

/* Nav Item Types */
.uk-nav-header {
  /* Nav section header */
  padding: 5px 0;
  text-transform: uppercase;
  color: #999;
  font-size: 11px;
}

.uk-nav-divider {
  /* Nav section divider */
  margin: 5px 0;
  border-top: 1px solid #e5e5e5;
}

/* Nav Sub Lists */
.uk-nav-sub {
  /* Sub-navigation list */
  padding-left: 15px;
}

.uk-nav .uk-nav-sub {
  /* Nested sub-navigation */
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Nav Parent Icon */
.uk-nav-parent-icon {
  /* Parent item icon indicator */
  margin-left: auto;
}

Usage Examples:

<!-- Default Nav -->
<ul class="uk-nav uk-nav-default">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li class="uk-nav-header">Header</li>
    <li><a href="#">Item</a></li>
    <li class="uk-nav-divider"></li>
    <li><a href="#">Item</a></li>
</ul>

<!-- Nav with Sub Items -->
<ul class="uk-nav uk-nav-default">
    <li class="uk-parent">
        <a href="#">Parent</a>
        <ul class="uk-nav-sub">
            <li><a href="#">Sub item</a></li>
            <li><a href="#">Sub item</a></li>
        </ul>
    </li>
</ul>

<!-- Primary Nav -->
<ul class="uk-nav uk-nav-primary">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

Breadcrumb

Breadcrumb navigation showing current page location in site hierarchy.

/* Breadcrumb List */
.uk-breadcrumb {
  /* Breadcrumb navigation list */
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-breadcrumb > * {
  /* Breadcrumb items */
  flex: none;
}

.uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before {
  /* Breadcrumb separator */
  content: "/";
  display: inline-block;
  margin: 0 10px;
  color: #999;
}

.uk-breadcrumb > :last-child {
  /* Current breadcrumb item */
  color: #999;
}

.uk-breadcrumb > * > * {
  /* Breadcrumb links */
  display: inline-block;
  text-decoration: none;
  color: #333;
}

Usage Examples:

<!-- Basic Breadcrumb -->
<ul class="uk-breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li><a href="#">Subcategory</a></li>
    <li><span>Current Page</span></li>
</ul>

<!-- Breadcrumb in Page Header -->
<header class="uk-section uk-section-small">
    <div class="uk-container">
        <ul class="uk-breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><span>Article Title</span></li>
        </ul>
        <h1>Article Title</h1>
    </div>
</header>

Pagination

Page navigation component for multi-page content.

/* Pagination List */
.uk-pagination {
  /* Pagination navigation list */
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-pagination > * {
  /* Pagination items */
  flex: none;
  position: relative;
}

.uk-pagination > * > * {
  /* Pagination links */
  display: block;
  padding: 5px 10px;
  color: #333;
  text-decoration: none;
  transition: color 0.1s ease-in-out;
}

.uk-pagination > .uk-active > * {
  /* Active pagination item */
  color: #999;
  background: #f8f8f8;
}

.uk-pagination > .uk-disabled > * {
  /* Disabled pagination item */
  color: #999;
}

/* Pagination Alignment */
.uk-pagination-left { /* Left aligned pagination */ }
.uk-pagination-right { /* Right aligned pagination */ }

/* Pagination Previous/Next */
.uk-pagination-previous { /* Previous page item */ }
.uk-pagination-next { /* Next page item */ }

Usage Examples:

<!-- Basic Pagination -->
<ul class="uk-pagination">
    <li><a href="#"><uk-icon icon="chevron-left"></uk-icon></a></li>
    <li><a href="#">1</a></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><a href="#">4</a></li>
    <li class="uk-active"><span>5</span></li>
    <li><a href="#">6</a></li>
    <li><a href="#">8</a></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><a href="#">20</a></li>
    <li><a href="#"><uk-icon icon="chevron-right"></uk-icon></a></li>
</ul>

<!-- Centered Pagination -->
<ul class="uk-pagination uk-flex-center">
    <li class="uk-pagination-previous"><a href="#">Previous</a></li>
    <li class="uk-pagination-next"><a href="#">Next</a></li>
</ul>

Tab

Tab navigation interface for content switching.

/* Tab Navigation */
.uk-tab {
  /* Tab navigation list */
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.uk-tab > * {
  /* Tab items */
  flex: none;
  position: relative;
}

.uk-tab > * > a {
  /* Tab links */
  display: block;
  text-decoration: none;
  color: #999;
  border-bottom: 1px solid transparent;
}

.uk-tab > .uk-active > a {
  /* Active tab */
  color: #333;
  border-bottom-color: #1e87f0;
}

/* Tab Positioning */
.uk-tab-bottom { /* Bottom positioned tabs */ }
.uk-tab-left { /* Left positioned tabs */ }
.uk-tab-right { /* Right positioned tabs */ }

/* Tab Alignment */
.uk-tab-center { /* Center aligned tabs */ }
.uk-tab-right { /* Right aligned tabs */ }

JavaScript API:

/**
 * Tab component for content switching
 */
UIkit.tab(element: HTMLElement, options?: {
  /** Tab connection target */
  connect?: string;
  /** Tab toggle type */
  toggle?: string;
  /** Active tab class */
  active?: number;
  /** Animation type */
  animation?: string;
  /** Animation duration */
  duration?: number;
  /** Swiping support */
  swiping?: boolean;
}): TabComponent;

interface TabComponent {
  /** Tab element */
  $el: HTMLElement;
  /** Show specific tab */
  show(index: number): void;
}

Usage Examples:

<!-- Basic Tabs -->
<ul class="uk-tab" uk-tab>
    <li class="uk-active"><a href="#">Left</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>Hello!</li>
    <li>Hello again!</li>
    <li>Bazinga!</li>
</ul>

<!-- Vertical Tabs -->
<div class="uk-grid">
    <div class="uk-width-auto">
        <ul class="uk-tab-left" uk-tab="connect: #component-tab-left">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
    <div class="uk-width-expand">
        <ul id="component-tab-left" class="uk-switcher">
            <li>Content 1</li>
            <li>Content 2</li>
            <li>Content 3</li>
        </ul>
    </div>
</div>

Subnav

Sub-navigation component for section-level navigation.

/* Subnav Base */
.uk-subnav {
  /* Sub-navigation list */
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-subnav > * {
  /* Subnav items */
  flex: none;
  position: relative;
}

.uk-subnav > * > * {
  /* Subnav links */
  display: inline-block;
  color: #999;
  text-decoration: none;
}

.uk-subnav > .uk-active > * {
  /* Active subnav item */
  color: #333;
}

/* Subnav Variants */
.uk-subnav-divider { /* Subnav with dividers */ }
.uk-subnav-pill { /* Pill-styled subnav */ }

/* Subnav Divider */
.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
  content: "|";
  display: inline-block;
  margin: 0 10px;
  color: #e5e5e5;
}

/* Subnav Pills */
.uk-subnav-pill > * > * {
  padding: 5px 10px;
  background: transparent;
  border-radius: 500px;
}

.uk-subnav-pill > .uk-active > * {
  background-color: #1e87f0;
  color: #fff;
}

Usage Examples:

<!-- Basic Subnav -->
<ul class="uk-subnav">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<!-- Subnav with Dividers -->
<ul class="uk-subnav uk-subnav-divider">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

<!-- Pill Subnav -->
<ul class="uk-subnav uk-subnav-pill">
    <li class="uk-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

Icon Navigation

Icon-based navigation components.

/* Icon Nav */
.uk-iconnav {
  /* Icon navigation list */
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-iconnav > * {
  /* Icon nav items */
  flex: none;
}

.uk-iconnav > * > * {
  /* Icon nav links */
  display: block;
  color: #999;
  text-decoration: none;
}

.uk-iconnav > .uk-active > * {
  /* Active icon nav item */
  color: #333;
}

/* Icon Nav Vertical */
.uk-iconnav-vertical {
  /* Vertical icon navigation */
  flex-direction: column;
}

/* Dot Nav */
.uk-dotnav {
  /* Dot navigation for sliders/galleries */
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uk-dotnav > * {
  /* Dot nav items */
  flex: none;
  position: relative;
}

.uk-dotnav > * > * {
  /* Dot nav links */
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.2);
}

.uk-dotnav > .uk-active > * {
  /* Active dot */
  background: rgba(0,0,0,0.7);
}

Usage Examples:

<!-- Icon Navigation -->
<ul class="uk-iconnav">
    <li><a href="#" uk-icon="icon: home"></a></li>
    <li><a href="#" uk-icon="icon: user"></a></li>
    <li><a href="#" uk-icon="icon: cog"></a></li>
</ul>

<!-- Dot Navigation -->
<ul class="uk-dotnav">
    <li class="uk-active"><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

<!-- Vertical Icon Nav -->
<ul class="uk-iconnav uk-iconnav-vertical">
    <li><a href="#" uk-icon="icon: facebook"></a></li>
    <li><a href="#" uk-icon="icon: twitter"></a></li>
    <li><a href="#" uk-icon="icon: instagram"></a></li>
</ul>

Install with Tessl CLI