Quick Links - Launchpad

Default

dashboard Dashboard analytics Analytics group Users settings Settings mail Messages calendar_month Calendar

<div class="lp-quick-links">
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">dashboard</span>
        <span class="lp-quick-links-label">Dashboard</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">analytics</span>
        <span class="lp-quick-links-label">Analytics</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">group</span>
        <span class="lp-quick-links-label">Users</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">settings</span>
        <span class="lp-quick-links-label">Settings</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">mail</span>
        <span class="lp-quick-links-label">Messages</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">calendar_month</span>
        <span class="lp-quick-links-label">Calendar</span>
    </a>
</div>

Contextual colors (per-item modifier)

add_task Primary layers Secondary check_circle Success delete Danger warning Warning info Info

<div class="lp-quick-links">
    <a href="#" class="lp-quick-links-item lp-quick-links-item-primary">
        <span class="lp-quick-links-icon material-symbols-rounded">add_task</span>
        <span class="lp-quick-links-label">Primary</span>
    </a>
    <a href="#" class="lp-quick-links-item lp-quick-links-item-secondary">
        <span class="lp-quick-links-icon material-symbols-rounded">layers</span>
        <span class="lp-quick-links-label">Secondary</span>
    </a>
    <a href="#" class="lp-quick-links-item lp-quick-links-item-success">
        <span class="lp-quick-links-icon material-symbols-rounded">check_circle</span>
        <span class="lp-quick-links-label">Success</span>
    </a>
    <a href="#" class="lp-quick-links-item lp-quick-links-item-danger">
        <span class="lp-quick-links-icon material-symbols-rounded">delete</span>
        <span class="lp-quick-links-label">Danger</span>
    </a>
    <a href="#" class="lp-quick-links-item lp-quick-links-item-warning">
        <span class="lp-quick-links-icon material-symbols-rounded">warning</span>
        <span class="lp-quick-links-label">Warning</span>
    </a>
    <a href="#" class="lp-quick-links-item lp-quick-links-item-info">
        <span class="lp-quick-links-icon material-symbols-rounded">info</span>
        <span class="lp-quick-links-label">Info</span>
    </a>
</div>

Borderless

home Home search Search favorite Favorites star Starred bookmark Saved

<div class="lp-quick-links lp-quick-links-borderless">
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">home</span>
        <span class="lp-quick-links-label">Home</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">search</span>
        <span class="lp-quick-links-label">Search</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">favorite</span>
        <span class="lp-quick-links-label">Favorites</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">star</span>
        <span class="lp-quick-links-label">Starred</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">bookmark</span>
        <span class="lp-quick-links-label">Saved</span>
    </a>
</div>

Divided (tight gap — mixed per-item colors)

add_circle Create Purchase Order receipt_long Purchase Order History add_circle Create Indents delete Cancel Order

<div class="lp-quick-links lp-quick-links-divided">
    <a href="#" class="lp-quick-links-item lp-quick-links-item-primary">
        <span class="lp-quick-links-icon material-symbols-rounded">add_circle</span>
        <span class="lp-quick-links-label">Create Purchase Order</span>
    </a>
    <a href="#" class="lp-quick-links-item lp-quick-links-item-info">
        <span class="lp-quick-links-icon material-symbols-rounded">receipt_long</span>
        <span class="lp-quick-links-label">Purchase Order History</span>
    </a>
    <a href="#" class="lp-quick-links-item lp-quick-links-item-success">
        <span class="lp-quick-links-icon material-symbols-rounded">add_circle</span>
        <span class="lp-quick-links-label">Create Indents</span>
    </a>
    <a href="#" class="lp-quick-links-item lp-quick-links-item-danger">
        <span class="lp-quick-links-icon material-symbols-rounded">delete</span>
        <span class="lp-quick-links-label">Cancel Order</span>
    </a>
</div>

Collapsible (many links — click the chevron to expand)

dashboard Dashboard analytics Analytics group Users settings Settings mail Messages calendar_month Calendar folder Files shopping_cart Orders payments Billing bar_chart Reports inventory_2 Inventory local_shipping Shipping support_agent Support security Security

<div class="lp-quick-links" data-lp-component="quick-links">
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">dashboard</span>
        <span class="lp-quick-links-label">Dashboard</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">analytics</span>
        <span class="lp-quick-links-label">Analytics</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">group</span>
        <span class="lp-quick-links-label">Users</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">settings</span>
        <span class="lp-quick-links-label">Settings</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">mail</span>
        <span class="lp-quick-links-label">Messages</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">calendar_month</span>
        <span class="lp-quick-links-label">Calendar</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">folder</span>
        <span class="lp-quick-links-label">Files</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">shopping_cart</span>
        <span class="lp-quick-links-label">Orders</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">payments</span>
        <span class="lp-quick-links-label">Billing</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">bar_chart</span>
        <span class="lp-quick-links-label">Reports</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">inventory_2</span>
        <span class="lp-quick-links-label">Inventory</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">local_shipping</span>
        <span class="lp-quick-links-label">Shipping</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">support_agent</span>
        <span class="lp-quick-links-label">Support</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">security</span>
        <span class="lp-quick-links-label">Security</span>
    </a>
</div>

Collapsible responsive (color-tinted — resize to trigger overflow)

rocket_launch Launch bolt Quick Actions trending_up Trends insights Insights hub Integrations webhook Webhooks api API Keys terminal Console monitor_heart Monitoring notifications Alerts

<div class="lp-quick-links lp-quick-links-primary" data-lp-component="quick-links">
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">rocket_launch</span>
        <span class="lp-quick-links-label">Launch</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">bolt</span>
        <span class="lp-quick-links-label">Quick Actions</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">trending_up</span>
        <span class="lp-quick-links-label">Trends</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">insights</span>
        <span class="lp-quick-links-label">Insights</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">hub</span>
        <span class="lp-quick-links-label">Integrations</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">webhook</span>
        <span class="lp-quick-links-label">Webhooks</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">api</span>
        <span class="lp-quick-links-label">API Keys</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">terminal</span>
        <span class="lp-quick-links-label">Console</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">monitor_heart</span>
        <span class="lp-quick-links-label">Monitoring</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">notifications</span>
        <span class="lp-quick-links-label">Alerts</span>
    </a>
</div>

Collapsible (few links — toggle auto-hidden)

check_circle Completed task_alt Approved verified Verified

<div class="lp-quick-links lp-quick-links-success" data-lp-component="quick-links">
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">check_circle</span>
        <span class="lp-quick-links-label">Completed</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">task_alt</span>
        <span class="lp-quick-links-label">Approved</span>
    </a>
    <a href="#" class="lp-quick-links-item">
        <span class="lp-quick-links-icon material-symbols-rounded">verified</span>
        <span class="lp-quick-links-label">Verified</span>
    </a>
</div>