Tabs & Accordions Component
Dynamic navigation tabs, vertical pill navigation, collapsible accordions, and animated collapse toggles.
Default Horizontal Tabs
Basic Bootstrap nav tabs with smooth panel switching and icon indicators.
Welcome to the Spark Admin dashboard overview tab. Here you can configure core application preferences and review primary metric widgets.
User profile details and team member credentials are listed here. You can manage user permissions and account security settings.
Recent user messages, support ticket updates, and client feedback notifications are collected in this view.
Justified Nav Tabs
Add `.nav-justified` to fill the entire horizontal width evenly across all tab items.
Justified tabs span the full width of the parent container, creating a balanced header layout for multi-step wizards or analytical dashboards.
Customize team role access levels and departmental member views across your organization.
Adjust dark mode themes, notification channels, email alert webhooks, and security audit logs.
Vertical Navigation Pills
Combine `.nav-pills` with `.flex-column` for a vertical side navigation layout.
Review high-level account status, monthly active usage quotas, and recent API access tokens.
Configure Two-Factor Authentication (2FA), review logged-in sessions, and generate emergency recovery keys.
Download monthly tax invoices, manage payment methods, and update subscription plans.
Standard Accordion
Collapsible content panels with smooth height transitions and brand active styling.
Yes! Spark Admin is designed for rapid enterprise development, SaaS platforms, and client admin portals with zero license restrictions.
100% offline compatible! All CSS and JS libraries (Bootstrap 5, ApexCharts, Flatpickr, Lucide Icons) are bundled inside `assets/libs/`.
Flush Accordion & Simple Collapse
Use `.accordion-flush` to remove outer borders or trigger standalone content toggles.
Edit the CSS custom variables in `assets/css/main.css` (`--brand-forest-medium`, `--brand-lime`) to update theme palettes globally.
This is a standalone collapsible container triggered via standard Bootstrap 5 `data-bs-toggle="collapse"`.
Reusable Code Snippets
Copy and paste these tabs and accordion snippets directly into your workspace files.
Nav Tabs & Tab Panes
<ul class="nav nav-tabs mb-3" role="tablist">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1">Tab 1</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">Content 1</div>
</div>
Accordion Component
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#acc1">Header</button>
</h2>
<div id="acc1" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
<div class="accordion-body">Body content</div>
</div>
</div>
</div>