Search with Filters
Inline search bars with category chips and dropdowns.
Search Bar with Category Filter
<div class="uk-search-bar">
<div class="uk-search-input-wrap">
<i class="fas fa-magnifying-glass uk-search-icon"></i>
<input type="text" class="uk-search-input" placeholder="Search articles, tutorials, guides...">
</div>
<select class="uk-search-select">
<option>All categories</option>
<option>Engineering</option>
<option>Design</option>
<option>Product</option>
<option>Marketing</option>
</select>
<button type="button" class="uk-search-submit">
<i class="fas fa-magnifying-glass"></i>
<span>Search</span>
</button>
</div>
<div class="uk-search-hint">
Popular: <a href="#" class="uk-search-hint-link">Laravel</a>, <a href="#" class="uk-search-hint-link">Tailwind</a>, ...
</div>
<style>
.uk-search-bar {
display: flex;
align-items: stretch;
gap: 0.5rem;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 0.75rem;
padding: 0.375rem;
box-shadow: 0 4px 14px rgba(30,58,138,0.06);
transition: border-color 0.15s, box-shadow 0.15s;
}
.uk-search-bar:focus-within {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-search-input-wrap {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.uk-search-icon {
position: absolute;
left: 0.875rem;
font-size: 0.9rem;
color: #94a3b8;
pointer-events: none;
}
.uk-search-input {
width: 100%;
border: none;
outline: none;
background: transparent;
padding: 0.65rem 0.75rem 0.65rem 2.5rem;
font-size: 0.9rem;
color: #0b1b2f;
}
.uk-search-input::placeholder {
color: #94a3b8;
}
.uk-search-select {
border: none;
border-left: 1px solid #e2e8f0;
background: transparent;
padding: 0 0.75rem;
font-size: 0.85rem;
font-weight: 600;
color: #475569;
outline: none;
cursor: pointer;
}
.uk-search-submit {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
color: #fff;
border: none;
border-radius: 0.5rem;
padding: 0.65rem 1.25rem;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.uk-search-submit:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(30,58,138,0.3);
}
.uk-search-hint {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 0.75rem;
text-align: left;
}
.uk-search-hint-link {
color: #1e3a8a;
font-weight: 600;
text-decoration: none;
}
.uk-search-hint-link:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
.uk-search-bar { flex-wrap: wrap; }
.uk-search-select { border-left: none; border-top: 1px solid #e2e8f0; }
.uk-search-submit { width: 100%; justify-content: center; }
}
</style>
Filter Pills
Filter by:
<div class="uk-filter-pills-header">
<span class="uk-filter-pills-label">Filter by:</span>
<button type="button" class="uk-filter-clear">
<i class="fas fa-xmark"></i> Clear all
</button>
</div>
<div class="uk-filter-pills">
<button type="button" class="uk-filter-pill uk-filter-pill-active">
<i class="fas fa-check"></i> All
</button>
<button type="button" class="uk-filter-pill">Engineering</button>
<button type="button" class="uk-filter-pill">Design</button>
<button type="button" class="uk-filter-pill">Product</button>
<button type="button" class="uk-filter-pill">Marketing</button>
<button type="button" class="uk-filter-pill">Tutorials</button>
<button type="button" class="uk-filter-pill">Case Studies</button>
</div>
<style>
.uk-filter-pills-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.uk-filter-pills-label {
font-size: 0.75rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.uk-filter-clear {
background: none;
border: none;
color: #64748b;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.5rem;
border-radius: 0.4rem;
transition: all 0.15s;
font-family: inherit;
}
.uk-filter-clear:hover {
color: #dc2626;
background: #fef2f2;
}
.uk-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.uk-filter-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #fff;
border: 1.5px solid #e2e8f0;
color: #475569;
font-size: 0.8rem;
font-weight: 600;
padding: 0.45rem 0.9rem;
border-radius: 999px;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.uk-filter-pill:hover {
border-color: #cbd5e1;
background: #f8fafc;
color: #0b1b2f;
}
.uk-filter-pill-active {
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 4px 12px rgba(30,58,138,0.25);
}
.uk-filter-pill-active:hover {
color: #fff;
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
}
.uk-filter-pill i {
font-size: 0.7rem;
}
</style>
Sidebar Filter Panel
<div class="uk-filter-sidebar">
<div class="uk-filter-sidebar-header">
<h3 class="uk-filter-sidebar-title"><i class="fas fa-sliders"></i> Filters</h3>
<button type="button" class="uk-filter-reset">Reset</button>
</div>
<div class="uk-filter-group">
<div class="uk-filter-group-title">Category</div>
<label class="uk-filter-checkbox">
<input type="checkbox" checked>
<span>Engineering</span>
<span class="uk-filter-count">24</span>
</label>
<label class="uk-filter-checkbox">
<input type="checkbox">
<span>Design</span>
<span class="uk-filter-count">18</span>
</label>
<!-- ... more checkboxes -->
</div>
<div class="uk-filter-group">
<div class="uk-filter-group-title">Price range</div>
<input type="range" class="uk-filter-range" min="0" max="200" value="80">
<div class="uk-filter-range-labels"><span>$0</span><span>$200</span></div>
</div>
<div class="uk-filter-group">
<div class="uk-filter-group-title">Rating</div>
<label class="uk-filter-radio">
<input type="radio" name="rating" checked>
<span class="uk-filter-stars">★★★★★</span>
<span>& up</span>
</label>
<!-- ... more radios -->
</div>
<button type="button" class="uk-filter-apply">
Apply filters <i class="fas fa-arrow-right"></i>
</button>
</div>
<style>
.uk-filter-sidebar {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.5rem;
text-align: left;
}
.uk-filter-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1rem;
border-bottom: 1px solid #e2e8f0;
margin-bottom: 1.25rem;
}
.uk-filter-sidebar-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
font-weight: 800;
color: #0b1b2f;
margin: 0;
}
.uk-filter-sidebar-title i {
color: #1e3a8a;
font-size: 0.85rem;
}
.uk-filter-reset {
background: none;
border: none;
color: #64748b;
font-size: 0.75rem;
font-weight: 700;
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 0.35rem;
transition: all 0.15s;
font-family: inherit;
}
.uk-filter-reset:hover {
color: #dc2626;
background: #fef2f2;
}
.uk-filter-group {
margin-bottom: 1.5rem;
}
.uk-filter-group-title {
font-size: 0.75rem;
font-weight: 800;
color: #334155;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 0.75rem;
}
.uk-filter-checkbox {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0;
font-size: 0.85rem;
color: #475569;
cursor: pointer;
user-select: none;
}
.uk-filter-checkbox input {
width: 16px;
height: 16px;
accent-color: #1e3a8a;
cursor: pointer;
flex-shrink: 0;
}
.uk-filter-checkbox span:first-of-type {
flex: 1;
}
.uk-filter-count {
font-size: 0.7rem;
font-weight: 700;
color: #94a3b8;
background: #f1f5f9;
padding: 2px 8px;
border-radius: 999px;
}
.uk-filter-range {
width: 100%;
accent-color: #1e3a8a;
cursor: pointer;
margin-bottom: 0.5rem;
}
.uk-filter-range-labels {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
font-weight: 600;
color: #94a3b8;
}
.uk-filter-radio {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 0;
font-size: 0.8rem;
color: #475569;
cursor: pointer;
user-select: none;
}
.uk-filter-radio input {
width: 16px;
height: 16px;
accent-color: #1e3a8a;
cursor: pointer;
flex-shrink: 0;
}
.uk-filter-stars {
display: inline-flex;
gap: 1px;
color: #f59e0b;
font-size: 0.75rem;
}
.uk-filter-stars .far {
color: #cbd5e1;
}
.uk-filter-apply {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%);
color: #fff;
border: none;
border-radius: 0.6rem;
padding: 0.75rem 1rem;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
box-shadow: 0 4px 14px rgba(30,58,138,0.25);
}
.uk-filter-apply:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(30,58,138,0.35);
}
.uk-filter-apply i {
font-size: 0.7rem;
transition: transform 0.15s;
}
.uk-filter-apply:hover i {
transform: translateX(3px);
}
</style>
Search with Suggestions Dropdown
<div class="uk-suggest-search">
<div class="uk-suggest-input-wrap">
<i class="fas fa-magnifying-glass uk-suggest-icon"></i>
<input type="text" class="uk-suggest-input" placeholder="Search documentation...">
<kbd class="uk-suggest-kbd">⌘K</kbd>
</div>
<div class="uk-suggest-dropdown">
<div class="uk-suggest-group-label">Suggestions</div>
<a href="#" class="uk-suggest-item">
<span class="uk-suggest-item-icon"><i class="fas fa-file-lines"></i></span>
<span class="uk-suggest-item-body">
<span class="uk-suggest-item-title">Getting started</span>
<span class="uk-suggest-item-category">Documentation</span>
</span>
<i class="fas fa-arrow-right uk-suggest-item-arrow"></i>
</a>
<!-- ... more items -->
<div class="uk-suggest-footer">
<span>Press <kbd>↑</kbd><kbd>↓</kbd> to navigate</span>
<span><kbd>↵</kbd> to select</span>
</div>
</div>
</div>
<style>
.uk-suggest-search { position: relative; }
.uk-suggest-input-wrap {
position: relative;
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 0.75rem;
box-shadow: 0 4px 14px rgba(30,58,138,0.06);
}
.uk-suggest-input-wrap:focus-within {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-suggest-icon {
position: absolute;
left: 1rem;
font-size: 0.9rem;
color: #94a3b8;
pointer-events: none;
}
.uk-suggest-input {
width: 100%;
border: none;
outline: none;
background: transparent;
padding: 0.85rem 4rem 0.85rem 2.75rem;
font-size: 0.9rem;
color: #0b1b2f;
border-radius: 0.75rem;
}
.uk-suggest-kbd {
position: absolute;
right: 0.75rem;
font-size: 0.7rem;
font-weight: 700;
color: #64748b;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 0.35rem;
padding: 0.2rem 0.45rem;
font-family: inherit;
}
.uk-suggest-dropdown {
margin-top: 0.5rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
box-shadow: 0 12px 32px rgba(30,58,138,0.1);
overflow: hidden;
text-align: left;
}
.uk-suggest-group-label {
font-size: 0.65rem;
font-weight: 800;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.75rem 1rem 0.5rem;
}
.uk-suggest-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 1rem;
text-decoration: none;
transition: background 0.12s;
border-top: 1px solid #f1f5f9;
}
.uk-suggest-item:hover {
background: #f8fafc;
}
.uk-suggest-item-icon {
width: 32px;
height: 32px;
border-radius: 0.5rem;
background: #eff6ff;
color: #1e3a8a;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
flex-shrink: 0;
}
.uk-suggest-item-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.uk-suggest-item-title {
font-size: 0.85rem;
font-weight: 600;
color: #0b1b2f;
}
.uk-suggest-item-category {
font-size: 0.7rem;
color: #94a3b8;
}
.uk-suggest-item-arrow {
font-size: 0.7rem;
color: #cbd5e1;
transition: all 0.15s;
}
.uk-suggest-item:hover .uk-suggest-item-arrow {
color: #1e3a8a;
transform: translateX(3px);
}
.uk-suggest-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 1rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
font-size: 0.7rem;
color: #94a3b8;
}
.uk-suggest-footer kbd {
font-family: inherit;
font-size: 0.65rem;
font-weight: 700;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.25rem;
padding: 0.1rem 0.35rem;
margin: 0 1px;
color: #475569;
}
</style>
Advanced Filter Toolbar
<div class="uk-adv-toolbar">
<div class="uk-adv-toolbar-top">
<div class="uk-adv-search">
<i class="fas fa-magnifying-glass"></i>
<input type="text" placeholder="Search 1,240 items...">
</div>
<div class="uk-adv-selects">
<select class="uk-adv-select">
<option>Sort: Newest</option>
<option>Sort: Oldest</option>
<option>Sort: Popular</option>
</select>
<select class="uk-adv-select">
<option>Status: All</option>
<option>Status: Active</option>
<option>Status: Draft</option>
</select>
<button type="button" class="uk-adv-more">
<i class="fas fa-filter"></i>
Filters
<span class="uk-adv-badge">2</span>
</button>
</div>
</div>
<div class="uk-adv-active">
<span class="uk-adv-active-label">Active:</span>
<span class="uk-adv-chip">
Engineering
<button type="button" class="uk-adv-chip-x"><i class="fas fa-xmark"></i></button>
</span>
<span class="uk-adv-chip">
$50 – $120
<button type="button" class="uk-adv-chip-x"><i class="fas fa-xmark"></i></button>
</span>
<button type="button" class="uk-adv-clear">Clear all</button>
<span class="uk-adv-count">Showing 1–12 of 1,240</span>
</div>
</div>
<style>
.uk-adv-toolbar {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
padding: 1rem;
text-align: left;
box-shadow: 0 4px 14px rgba(30,58,138,0.04);
}
.uk-adv-toolbar-top {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.uk-adv-search {
position: relative;
flex: 1;
min-width: 200px;
display: flex;
align-items: center;
}
.uk-adv-search i {
position: absolute;
left: 0.75rem;
font-size: 0.85rem;
color: #94a3b8;
pointer-events: none;
}
.uk-adv-search input {
width: 100%;
border: 1.5px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.55rem 0.75rem 0.55rem 2.2rem;
font-size: 0.85rem;
color: #0b1b2f;
outline: none;
transition: all 0.15s;
font-family: inherit;
}
.uk-adv-search input::placeholder {
color: #94a3b8;
}
.uk-adv-search input:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
}
.uk-adv-selects {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.uk-adv-select {
border: 1.5px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
font-weight: 600;
color: #475569;
background: #fff;
outline: none;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.uk-adv-select:hover, .uk-adv-select:focus {
border-color: #cbd5e1;
}
.uk-adv-more {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #f1f5f9;
border: 1.5px solid #e2e8f0;
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
font-weight: 700;
color: #334155;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.uk-adv-more:hover {
background: #e2e8f0;
}
.uk-adv-badge {
background: #1e3a8a;
color: #fff;
font-size: 0.65rem;
font-weight: 800;
padding: 1px 6px;
border-radius: 999px;
margin-left: 0.15rem;
}
.uk-adv-active {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.85rem;
padding-top: 0.85rem;
border-top: 1px solid #f1f5f9;
}
.uk-adv-active-label {
font-size: 0.7rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.uk-adv-chip {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #eff6ff;
color: #1e3a8a;
border: 1px solid #dbeafe;
font-size: 0.75rem;
font-weight: 600;
padding: 0.3rem 0.5rem 0.3rem 0.7rem;
border-radius: 999px;
}
.uk-adv-chip-x {
background: transparent;
border: none;
color: #1e3a8a;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 0.6rem;
transition: background 0.12s;
}
.uk-adv-chip-x:hover {
background: rgba(30,58,138,0.15);
}
.uk-adv-clear {
background: none;
border: none;
color: #64748b;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 0.35rem;
transition: all 0.15s;
font-family: inherit;
}
.uk-adv-clear:hover {
color: #dc2626;
background: #fef2f2;
}
.uk-adv-count {
margin-left: auto;
font-size: 0.75rem;
color: #94a3b8;
font-weight: 600;
}
@media (max-width: 640px) {
.uk-adv-toolbar-top { flex-direction: column; align-items: stretch; }
.uk-adv-selects { flex: 1; }
.uk-adv-count { margin-left: 0; width: 100%; text-align: right; }
}
</style>