Utilities

µCSS provides generic CSS utility classes that can be applied to any element. These include positioning helpers, cursor utilities, and color utilities.

Positioning #

Three classes for sticky and fixed positioning, defined in css/mu.utilities.css:

Class	Effect
`.sticky-top`	`position: sticky; top: 0` — stays in flow, sticks to the top on scroll
`.fixed-top`	`position: fixed; top: 0; right: 0; left: 0` — always fixed to the viewport top
`.fixed-bottom`	`position: fixed; bottom: 0; right: 0; left: 0` — fixed to the viewport bottom

Sticky navigation bar #

The recommended approach for navbars — the element stays in the document flow and sticks to the top when scrolled past:

<nav class="sticky-top">
    <ul><li><strong>Brand</strong></li></ul>
    <input type="checkbox" id="nav-s" class="navbar-toggle" hidden>
    <label for="nav-s" class="navbar-burger">&#9776;</label>
    <ul class="navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

Sticky table header #

Keep table headers visible while scrolling through long tables:

Name	Email
Alice	alice@example.com
Bob	bob@example.com
Charlie	charlie@example.com
Diana	diana@example.com
Eve	eve@example.com

<table>
    <thead>
        <tr>
            <th class="sticky-top">Name</th>
            <th class="sticky-top">Email</th>
        </tr>
    </thead>
    <tbody>...</tbody>
</table>

Sticky sidebar / table of contents #

Keep a sidebar or table of contents visible while scrolling through content:

<aside class="sticky-top" style="top: 1rem;">
    <nav>
        <ul>
            <li><a href="#section-1">Section 1</a></li>
            <li><a href="#section-2">Section 2</a></li>
        </ul>
    </nav>
</aside>

Fixed bottom action bar #

A common mobile pattern for persistent action buttons at the bottom of the viewport:

<div class="fixed-bottom" style="padding: 1rem; background: var(--mu-background-color);">
    <button class="btn btn-primary" style="width: 100%;">Confirm</button>
</div>

Nav-specific overrides #

When used on a <nav>, the positioning classes automatically add z-index: 100 and box-shadow to elevate the navbar above content. See Nav for details.

Cursor #

Class	Effect
`.clickable`	`cursor: pointer` — shows a pointer cursor on hover

Use .clickable on elements that are interactive via JavaScript but are not <a> or <button> (which already show a pointer cursor natively).

Name	Email
Alice	alice@example.com
Bob	bob@example.com

<tr class="clickable" onclick="openDetail(this)">
    <td>Row content</td>
</tr>

Notes #

.sticky-top requires a scrollable ancestor — the element stays in the document flow and sticks when scrolled past.
.fixed-top and .fixed-bottom remove the element from the flow — add padding-top or padding-bottom on <body> to prevent content from being hidden behind.
Override the default top: 0 on .sticky-top via inline style if you need an offset (e.g., style="top: 1rem").

Color utilities #

Text, background, and border color classes are documented in Colors.

Accessibility #

Sticky and fixed elements can obscure content for keyboard and screen reader users — ensure sufficient padding or offsets to prevent overlap.
Fixed bottom bars should not block interactive elements underneath; test with keyboard tab navigation.
Use appropriate ARIA landmarks (role="navigation", role="complementary") on sticky elements so assistive technologies can identify them.
Ensure sticky headers remain visible and do not create scroll traps on small viewports.