Sidebar with Flyout Submenu

Hover over menu items to see the flyout submenu (like real X-Cart)

Code

<div class="xcart-sidebar-item">
    <i class="fas fa-shopping-cart"></i>
    <div class="xcart-sidebar-submenu">
        <div class="xcart-sidebar-submenu-header">Orders</div>
        <a href="#" class="xcart-sidebar-submenu-item active">
            Orders
            <span class="xcart-sidebar-submenu-badge">3</span>
        </a>
        <a href="#" class="xcart-sidebar-submenu-item">Shipments</a>
        <div class="xcart-sidebar-submenu-divider"></div>
        <a href="#" class="xcart-sidebar-submenu-item">Settings</a>
    </div>
</div>

Top Bar with Search Dropdown

Header bar with category dropdown in search (like real X-Cart)

Code

<div class="xcart-topbar-search-group">
    <select class="xcart-topbar-search-select">
        <option>Products</option>
        <option>Orders</option>
    </select>
    <input type="text" placeholder="Search...">
    <button class="xcart-topbar-search-btn">
        <i class="fas fa-search"></i>
    </button>
</div>

Primary & Secondary Tabs

Two-level tab navigation (like Orders page)

Code

<nav class="xcart-tabs-primary">
    <a href="#" class="xcart-tab-link active">Recent orders</a>
    <a href="#" class="xcart-tab-link">Returns</a>
</nav>
<nav class="xcart-tabs-secondary">
    <a href="#" class="xcart-tab-link active">No filters</a>
    <a href="#" class="xcart-tab-link">Awaiting processing (3)</a>
</nav>

Table Row Actions

Three-dot menu and action buttons for table rows

Sticky Footer Save Bar

Fixed footer bar for form actions

Code

<div class="xcart-sticky-footer">
    <span class="xcart-sticky-footer-info">
        <i class="fas fa-info-circle"></i> Unsaved changes
    </span>
    <button class="xcart-btn xcart-btn-link">Cancel</button>
    <button class="xcart-btn xcart-btn-primary">Save changes</button>
</div>

Basic Sidebar Navigation

X-Cart admin left sidebar (70px wide, dark background #333333)

Top Navigation Bar

Header bar with search and user menu (height 40px, background #333333)

Page Header with Inline Breadcrumb

Page title with integrated breadcrumb navigation (like real X-Cart admin)

Code

<!-- Style 1: Breadcrumb above title -->
<div class="xcart-page-header-with-breadcrumb">
    <nav class="xcart-breadcrumb" style="margin-bottom: 8px;">
        <a href="#" class="xcart-breadcrumb-item"><i class="fas fa-home"></i></a>
        <span class="xcart-breadcrumb-separator">/</span>
        <a href="#" class="xcart-breadcrumb-item">Orders</a>
    </nav>
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <h1>Order #00055</h1>
        <button class="xcart-btn xcart-btn-primary">Action</button>
    </div>
</div>

<!-- Style 2: Inline breadcrumb in title -->
<div class="xcart-page-header-with-breadcrumb">
    <h1>
        <span class="xcart-breadcrumb-inline">
            <a href="#"><i class="fas fa-home"></i></a>
            <span>/</span>
            <a href="#">Settings</a>
            <span>/</span>
        </span>
        Acumatica Integration
    </h1>
</div>

Breadcrumbs

Navigation path indicator

Tabs

Tab navigation for content sections

Secondary Navigation

Sub-menu navigation

Pagination

Page navigation for lists

Dropdown Menu

Action menus and selectors

CSS Classes Reference