or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cards.mdindex.mdlayout-navigation.mdplugins.mdsearch.mdstyling.mdutilities.mdwidgets.md
tile.json

search.mddocs/

Search Components

AdminLTE provides search functionality for both the navbar and sidebar navigation. These components enable users to quickly find and navigate to specific menu items with keyboard navigation support and result highlighting.

NavbarSearch

The NavbarSearch component provides a search interface within the main navigation bar, allowing users to quickly search and toggle the search interface.

API

class NavbarSearch {
  constructor(element: HTMLElement, options?: NavbarSearchOptions);
  open(): void;
  close(): void;
  toggle(): void;
}

interface NavbarSearchOptions {
  resetOnClose?: boolean;
  target?: string;
}

Default Configuration

const NavbarSearchDefaults = {
  resetOnClose: true,
  target: '.navbar-search-block'
};

Usage Examples

Programmatic Usage

import { NavbarSearch } from 'admin-lte';

// Initialize navbar search
const searchElement = document.querySelector('[data-widget="navbar-search"]');
const navbarSearch = new NavbarSearch(searchElement, {
  resetOnClose: true,
  target: '.custom-search-block'
});

// Control search interface
navbarSearch.open();
navbarSearch.close();
navbarSearch.toggle();

Data Attribute Usage

<!-- Navbar search implementation -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
  <ul class="navbar-nav">
    <!-- Search toggle button -->
    <li class="nav-item">
      <a class="nav-link" data-widget="navbar-search" href="#" role="button">
        <i class="fas fa-search"></i>
      </a>
    </li>
  </ul>
</nav>

<!-- Search form (initially hidden) -->
<div class="navbar-search-block">
  <form class="form-inline">
    <div class="input-group input-group-sm">
      <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
      <div class="input-group-append">
        <button class="btn btn-navbar" type="submit">
          <i class="fas fa-search"></i>
        </button>
        <button class="btn btn-navbar" type="button" data-widget="navbar-search">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
  </form>
</div>

Complete Navbar with Search

<nav class="main-header navbar navbar-expand navbar-white navbar-light">
  <!-- Left navbar links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" data-widget="pushmenu" href="#" role="button">
        <i class="fas fa-bars"></i>
      </a>
    </li>
    <li class="nav-item d-none d-sm-inline-block">
      <a href="index.html" class="nav-link">Home</a>
    </li>
    <li class="nav-item d-none d-sm-inline-block">
      <a href="#" class="nav-link">Contact</a>
    </li>
  </ul>

  <!-- Right navbar links -->
  <ul class="navbar-nav ml-auto">
    <!-- Navbar Search -->
    <li class="nav-item">
      <a class="nav-link" data-widget="navbar-search" href="#" role="button">
        <i class="fas fa-search"></i>
      </a>
      <div class="navbar-search-block">
        <form class="form-inline">
          <div class="input-group input-group-sm">
            <input class="form-control form-control-navbar" 
                   type="search" 
                   placeholder="Search" 
                   aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-navbar" type="submit">
                <i class="fas fa-search"></i>
              </button>
              <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                <i class="fas fa-times"></i>
              </button>
            </div>
          </div>
        </form>
      </div>
    </li>
  </ul>
</nav>

SidebarSearch

The SidebarSearch component provides intelligent search functionality within the sidebar navigation, with features like result highlighting, keyboard navigation, and minimum search length requirements.

API

class SidebarSearch {
  constructor(element: HTMLElement, options?: SidebarSearchOptions);
  init(): void;
  search(): void;
  open(): void;
  close(): void;
  toggle(): void;
}

interface SidebarSearchOptions {
  arrowSign?: string;
  minLength?: number;
  maxResults?: number;
  highlightName?: boolean;
  highlightPath?: boolean;
  highlightClass?: string;
  notFoundText?: string;
}

Default Configuration

const SidebarSearchDefaults = {
  arrowSign: '->',
  minLength: 3,
  maxResults: 7,
  highlightName: true,
  highlightPath: false,
  highlightClass: 'text-light',
  notFoundText: 'No element found!'
};

Keyboard Navigation

// Keyboard events supported by SidebarSearch
type SidebarSearchKeyEvents = {
  ArrowUp: 38,    // Navigate to previous result
  ArrowDown: 40,  // Navigate to next result
  Enter: 13       // Select current result
};

Usage Examples

Programmatic Usage

import { SidebarSearch } from 'admin-lte';

// Initialize sidebar search
const searchElement = document.querySelector('[data-widget="sidebar-search"]');
const sidebarSearch = new SidebarSearch(searchElement, {
  minLength: 2,
  maxResults: 10,
  highlightName: true,
  highlightPath: true,
  highlightClass: 'bg-warning text-dark',
  notFoundText: 'No menu items found!'
});

// Control search programmatically
sidebarSearch.init();
sidebarSearch.search();
sidebarSearch.open();
sidebarSearch.close();

Data Attribute Usage

<!-- Sidebar with search -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
  <div class="sidebar">
    <!-- Sidebar search form -->
    <div class="form-inline">
      <div class="input-group" data-widget="sidebar-search">
        <input class="form-control form-control-sidebar" 
               type="search" 
               placeholder="Search" 
               aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-sidebar">
            <i class="fas fa-search fa-fw"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Sidebar Menu -->
    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" 
          data-widget="treeview" 
          role="menu" 
          data-accordion="false">
        <li class="nav-item menu-open">
          <a href="#" class="nav-link active">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            <p>Dashboard</p>
          </a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">
            <i class="nav-icon fas fa-users"></i>
            <p>
              User Management
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="users.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>All Users</p>
              </a>
            </li>
            <li class="nav-item">
              <a href="roles.html" class="nav-link">
                <i class="far fa-circle nav-icon"></i>
                <p>User Roles</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="settings.html" class="nav-link">
            <i class="nav-icon fas fa-cog"></i>
            <p>Settings</p>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</aside>

Advanced Sidebar Search Configuration

const sidebarSearch = new SidebarSearch(searchElement, {
  arrowSign: ' → ',           // Custom path separator
  minLength: 1,               // Start searching after 1 character
  maxResults: 15,             // Show up to 15 results
  highlightName: true,        // Highlight matched text in menu names
  highlightPath: true,        // Highlight matched text in breadcrumb paths
  highlightClass: 'bg-success text-white', // Custom highlight styling
  notFoundText: 'Sorry, no matching menu items found!'
});

// The search will show results like:
// "Dashboard" (exact match)
// "User Management → All Users" (nested match)
// "User Management → User Roles" (nested match)

Custom Search Results Styling

/* Custom styling for search results */
.sidebar-search-results .list-group-item {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #c2c7d0;
}

.sidebar-search-results .list-group-item:hover,
.sidebar-search-results .list-group-item.active {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.sidebar-search-results .list-group-item .search-path {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* Custom highlight styling */
.sidebar-search-results .bg-success {
  background-color: #28a745 !important;
  color: #ffffff !important;
  font-weight: bold;
}

Complete Search Implementation

Here's a complete example showing both navbar and sidebar search working together:

<!DOCTYPE html>
<html lang="en">
<body class="hold-transition sidebar-mini">
  <div class="wrapper">
    <!-- Navbar with search -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" data-widget="pushmenu" href="#" role="button">
            <i class="fas fa-bars"></i>
          </a>
        </li>
      </ul>
      
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" data-widget="navbar-search" href="#" role="button">
            <i class="fas fa-search"></i>
          </a>
          <div class="navbar-search-block">
            <form class="form-inline">
              <div class="input-group input-group-sm">
                <input class="form-control form-control-navbar" 
                       type="search" 
                       placeholder="Search site..." 
                       aria-label="Search">
                <div class="input-group-append">
                  <button class="btn btn-navbar" type="submit">
                    <i class="fas fa-search"></i>
                  </button>
                  <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </li>
      </ul>
    </nav>

    <!-- Sidebar with search -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
      <div class="sidebar">
        <!-- Sidebar search -->
        <div class="form-inline">
          <div class="input-group" data-widget="sidebar-search">
            <input class="form-control form-control-sidebar" 
                   type="search" 
                   placeholder="Search menu..." 
                   aria-label="Search">
            <div class="input-group-append">
              <button class="btn btn-sidebar">
                <i class="fas fa-search fa-fw"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- Sidebar Menu -->
        <nav class="mt-2">
          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview">
            <!-- Menu items will be searchable -->
          </ul>
        </nav>
      </div>
    </aside>

    <!-- Content wrapper -->
    <div class="content-wrapper">
      <!-- Your content here -->
    </div>
  </div>

  <script src="dist/js/adminlte.min.js"></script>
  <script>
    // Initialize with custom options
    $(document).ready(function() {
      $('[data-widget="sidebar-search"]').SidebarSearch({
        minLength: 2,
        maxResults: 8,
        highlightName: true,
        highlightPath: true
      });
    });
  </script>
</body>
</html>

Both search components provide:

  • Smooth show/hide animations
  • Keyboard navigation support
  • Configurable search behavior
  • Highlighting of matching text
  • Integration with AdminLTE's theming system