Skip to main content

Extended components

Discover boodoo v1.3.1's extended components designed for enterprise dashboards, multi-level navigation, rich notification streams, and interactive user onboarding tours.

Stat & Metric Widget

The .stat-widget card highlights primary metrics, KPIs, and data trends with customizable icons, values, and percentage indicators.

Total Revenue

$

$128,450

↑ 14.8% vs last month

Active Subscriptions

#

3,420

↑ 8.2% new accounts

Bounce Rate

%

24.3%

↓ 2.1% improved retention 

<div class="stat-widget stat-widget-interactive">
  <div class="stat-header">
    <h4 class="stat-title"><span>Total Revenue</span></h4>
    <span class="stat-icon stat-icon-success"><span>$</span></span>
  </div>
  <p class="stat-value"><span>$128,450</span></p>
  <p class="stat-footer">
    <span class="stat-trend stat-trend-up"><span>&uarr; 14.8%</span></span>
    <span>vs last month</span>
  </p>
</div>

Activity Feed & Notification Center

Use .activity-feed and .notification-feed to render real-time user activity logs, system alerts, and notification lists with unread indicators.

  • JD
    New team invitation accepted

    Jane Doe has accepted your invitation to join the design operations workspace.

    10 minutes ago

    New
  • DB
    Deployment successful

    Production pipeline #184 completed with 100% test coverage.

    2 hours ago

<ul class="activity-feed">
  <li class="feed-item unread">
    <div class="feed-avatar">
      <span class="avatar avatar-circle avatar-sm text-bg-primary"><span>JD</span></span>
    </div>
    <div class="feed-body">
      <h5 class="feed-title"><span>New team invitation accepted</span></h5>
      <p class="feed-text"><span>Jane Doe joined the workspace.</span></p>
      <p class="feed-meta"><span>10 minutes ago</span></p>
    </div>
  </li>
</ul>

Mega Menu

Full-width categorised navigation drawer (.mega-menu) with responsive columns for large application headers.

<div class="mega-menu">
  <div class="mega-menu-panel show">
    <div class="mega-menu-grid">
      <div>
        <h5 class="mega-menu-heading"><span>Products</span></h5>
        <ul class="mega-menu-list">
          <li><a href="#"><span>Analytics Cloud</span></a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Integrate inline dropdown selectors directly inside breadcrumbs to let users navigate parallel siblings or branch hierarchies.

Floating Action Button Dock

The .fab-dock component provides a fixed multi-action button with popup action links, keyboard ESC dismissal, and click-outside tracking.

<div class="fab-dock" id="myDock">
  <button type="button" class="fab-dock-trigger" aria-label="Quick Actions">
    <span class="fab-icon-open"><span>+</span></span>
    <span class="fab-icon-close"><span>&times;</span></span>
  </button>
  <div class="fab-dock-items">
    <button type="button" class="fab-dock-item">
      <span class="fab-item-label"><span>Upload File</span></span>
      <span class="fab-item-btn"><span>&uarr;</span></span>
    </button>
  </div>
</div>

Fullscreen Immersive Dialog

.dialog-fullscreen creates a full-viewport modal interface optimal for intensive editor surfaces, multi-step forms, and focused tasks on mobile and desktop.

Full-Screen Workspace Editor

Immersive Viewport

This dialog occupies the entire viewport, preventing background scrolling and providing maximal workspace area.

Guided Tour & Walkthrough

The boodoo.Tour class generates popover guides that walk users step-by-step through features with target element anchoring, progress dots, and keyboard navigation.

const tour = new boodoo.Tour(document.body, {
  steps: [
    { target: '#statWidget', title: 'KPI Metrics', content: 'View real-time metrics and trends.' },
    { target: '#notifications', title: 'Notifications', content: 'Stay on top of updates.' }
  ]
});
tour.start();