## Rail

Side panel and rail navigation components.

### Basic Rail Navigation

#### Main Content Area

This is where your main content would appear alongside the navigation rail.

HTML

    <div
                style="
                    display: flex;
                    gap: 0;
                    min-height: 350px;
                    border-radius: 12px;
                    overflow: hidden;
                    border: 1px solid var(--color_line_secondary);
                "
            >
                <nav
                    class="rail"
                    style="
                        width: 72px;
                        background: var(--color_fill_secondary);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 16px 0;
                        gap: 8px;
                    "
                >
                    <a
                        href="#"
                        class="rail--item active"
                        style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 12px;
                            border-radius: 12px;
                            background: var(--color_fill_primary);
                            color: white;
                            text-decoration: none;
                            width: 56px;
                        "
                    >
                        <span style="font-size: 20px">🏠</span>
                        <span style="font-size: 10px; margin-top: 4px">Home</span>
                    </a>
                    <a
                        href="#"
                        class="rail--item"
                        style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 12px;
                            border-radius: 12px;
                            text-decoration: none;
                            width: 56px;
                            opacity: 0.7;
                        "
                    >
                        <span style="font-size: 20px">🔍</span>
                        <span style="font-size: 10px; margin-top: 4px">
                            Search
                        </span>
                    </a>
                    <a
                        href="#"
                        class="rail--item"
                        style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 12px;
                            border-radius: 12px;
                            text-decoration: none;
                            width: 56px;
                            opacity: 0.7;
                        "
                    >
                        <span style="font-size: 20px">📊</span>
                        <span style="font-size: 10px; margin-top: 4px">Stats</span>
                    </a>
                    <a
                        href="#"
                        class="rail--item"
                        style="
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 12px;
                            border-radius: 12px;
                            text-decoration: none;
                            width: 56px;
                            opacity: 0.7;
                        "
                    >
                        <span style="font-size: 20px">⚙️</span>
                        <span style="font-size: 10px; margin-top: 4px">
                            Settings
                        </span>
                    </a>
                </nav>
                <main style="flex: 1; padding: 24px; background: white">
                    <h4 style="margin: 0 0 12px">Main Content Area</h4>
                    <p style="margin: 0; opacity: 0.7">
                        This is where your main content would appear alongside the
                        navigation rail.
                    </p>
                </main>
            </div>

### Extended Rail with Labels

#### Extended Rail Content

Extended rail provides more space for labels and additional navigation items.

HTML

    <div
                style="
                    display: flex;
                    gap: 0;
                    min-height: 350px;
                    border-radius: 12px;
                    overflow: hidden;
                    border: 1px solid var(--color_line_secondary);
                "
            >
                <nav
                    class="rail rail--extended"
                    style="
                        width: 240px;
                        background: var(--color_fill_secondary);
                        padding: 20px 12px;
                    "
                >
                    <div
                        style="
                            padding: 0 12px 20px;
                            border-bottom: 1px solid var(--color_line_secondary);
                            margin-bottom: 16px;
                        "
                    >
                        <h3 style="margin: 0; font-size: 18px">Dashboard</h3>
                    </div>
                    <a
                        href="#"
                        class="rail--item active"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 12px 16px;
                            border-radius: 8px;
                            background: var(--color_fill_primary);
                            color: white;
                            text-decoration: none;
                            margin-bottom: 4px;
                        "
                    >
                        <span style="font-size: 18px">🏠</span>
                        <span>Home</span>
                    </a>
                    <a
                        href="#"
                        class="rail--item"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 12px 16px;
                            border-radius: 8px;
                            text-decoration: none;
                            margin-bottom: 4px;
                            opacity: 0.8;
                        "
                    >
                        <span style="font-size: 18px">📁</span>
                        <span>Projects</span>
                    </a>
                    <a
                        href="#"
                        class="rail--item"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 12px 16px;
                            border-radius: 8px;
                            text-decoration: none;
                            margin-bottom: 4px;
                            opacity: 0.8;
                        "
                    >
                        <span style="font-size: 18px">👥</span>
                        <span>Team</span>
                    </a>
                    <a
                        href="#"
                        class="rail--item"
                        style="
                            display: flex;
                            align-items: center;
                            gap: 12px;
                            padding: 12px 16px;
                            border-radius: 8px;
                            text-decoration: none;
                            margin-bottom: 4px;
                            opacity: 0.8;
                        "
                    >
                        <span style="font-size: 18px">📅</span>
                        <span>Calendar</span>
                    </a>
                    <div
                        style="
                            margin-top: auto;
                            padding-top: 16px;
                            border-top: 1px solid var(--color_line_secondary);
                        "
                    >
                        <a
                            href="#"
                            class="rail--item"
                            style="
                                display: flex;
                                align-items: center;
                                gap: 12px;
                                padding: 12px 16px;
                                border-radius: 8px;
                                text-decoration: none;
                                opacity: 0.8;
                            "
                        >
                            <span style="font-size: 18px">⚙️</span>
                            <span>Settings</span>
                        </a>
                    </div>
                </nav>
                <main style="flex: 1; padding: 24px; background: white">
                    <h4 style="margin: 0 0 12px">Extended Rail Content</h4>
                    <p style="margin: 0; opacity: 0.7">
                        Extended rail provides more space for labels and additional
                        navigation items.
                    </p>
                </main>
            </div>

### Collapsible Rail

Collapsed State
Expanded State
HTML

    <div style="display: flex; flex-direction: column; gap: 16px">
                <!-- Collapsed State -->
                <div
                    style="
                        display: flex;
                        gap: 0;
                        min-height: 200px;
                        border-radius: 12px;
                        overflow: hidden;
                        border: 1px solid var(--color_line_secondary);
                    "
                >
                    <nav
                        class="rail rail--collapsed"
                        style="
                            width: 64px;
                            background: #1a1a2e;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            padding: 16px 0;
                            gap: 4px;
                        "
                    >
                        <button
                            style="
                                width: 44px;
                                height: 44px;
                                border: none;
                                background: transparent;
                                color: white;
                                cursor: pointer;
                                border-radius: 8px;
                                font-size: 20px;
                            "
                        >
                            ☰
                        </button>
                        <div
                            style="
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                gap: 4px;
                                margin-top: 12px;
                            "
                        >
                            <a
                                href="#"
                                style="
                                    width: 44px;
                                    height: 44px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    background: rgba(255, 255, 255, 0.1);
                                    border-radius: 8px;
                                    color: white;
                                    text-decoration: none;
                                "
                            >
                                🏠
                            </a>
                            <a
                                href="#"
                                style="
                                    width: 44px;
                                    height: 44px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    border-radius: 8px;
                                    color: white;
                                    text-decoration: none;
                                    opacity: 0.6;
                                "
                            >
                                📊
                            </a>
                            <a
                                href="#"
                                style="
                                    width: 44px;
                                    height: 44px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    border-radius: 8px;
                                    color: white;
                                    text-decoration: none;
                                    opacity: 0.6;
                                "
                            >
                                🔔
                            </a>
                        </div>
                    </nav>
                    <main style="flex: 1; padding: 20px; background: white">
                        <span
                            style="
                                font-size: 12px;
                                opacity: 0.6;
                                text-transform: uppercase;
                            "
                        >
                            Collapsed State
                        </span>
                    </main>
                </div>
                <!-- Expanded State -->
                <div
                    style="
                        display: flex;
                        gap: 0;
                        min-height: 200px;
                        border-radius: 12px;
                        overflow: hidden;
                        border: 1px solid var(--color_line_secondary);
                    "
                >
                    <nav
                        class="rail rail--expanded"
                        style="
                            width: 220px;
                            background: #1a1a2e;
                            padding: 16px;
                            color: white;
                        "
                    >
                        <div
                            style="
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                margin-bottom: 24px;
                            "
                        >
                            <span style="font-weight: 600">Navigation</span>
                            <button
                                style="
                                    width: 32px;
                                    height: 32px;
                                    border: none;
                                    background: rgba(255, 255, 255, 0.1);
                                    color: white;
                                    cursor: pointer;
                                    border-radius: 6px;
                                "
                            >
                                ✕
                            </button>
                        </div>
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: center;
                                gap: 12px;
                                padding: 12px;
                                background: rgba(255, 255, 255, 0.1);
                                border-radius: 8px;
                                color: white;
                                text-decoration: none;
                                margin-bottom: 8px;
                            "
                        >
                            <span>🏠</span>
                            Home
                        </a>
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: center;
                                gap: 12px;
                                padding: 12px;
                                border-radius: 8px;
                                color: white;
                                text-decoration: none;
                                opacity: 0.7;
                                margin-bottom: 8px;
                            "
                        >
                            <span>📊</span>
                            Analytics
                        </a>
                        <a
                            href="#"
                            style="
                                display: flex;
                                align-items: center;
                                gap: 12px;
                                padding: 12px;
                                border-radius: 8px;
                                color: white;
                                text-decoration: none;
                                opacity: 0.7;
                            "
                        >
                            <span>🔔</span>
                            Notifications
                        </a>
                    </nav>
                    <main style="flex: 1; padding: 20px; background: white">
                        <span
                            style="
                                font-size: 12px;
                                opacity: 0.6;
                                text-transform: uppercase;
                            "
                        >
                            Expanded State
                        </span>
                    </main>
                </div>
            </div>

### Right Side Rail

#### Document Content

This is the main content area. The right rail can be used for contextual information, tools, or secondary navigation.

Right rails are particularly useful for properties panels, comments, or related content.

##### Properties

Status
Author
Jane Doe
Last Modified Today at 2:34 PM
HTML

    <div
                style="
                    display: flex;
                    gap: 0;
                    min-height: 300px;
                    border-radius: 12px;
                    overflow: hidden;
                    border: 1px solid var(--color_line_secondary);
                "
            >
                <main style="flex: 1; padding: 24px; background: white">
                    <h4 style="margin: 0 0 16px">Document Content</h4>
                    <p style="margin: 0 0 12px; opacity: 0.8; line-height: 1.6">
                        This is the main content area. The right rail can be used
                        for contextual information, tools, or secondary navigation.
                    </p>
                    <p style="margin: 0; opacity: 0.8; line-height: 1.6">
                        Right rails are particularly useful for properties panels,
                        comments, or related content.
                    </p>
                </main>
                <aside
                    class="rail rail--right"
                    style="
                        width: 280px;
                        background: var(--color_fill_secondary);
                        padding: 20px;
                        border-left: 1px solid var(--color_line_secondary);
                    "
                >
                    <h5
                        style="
                            margin: 0 0 16px;
                            font-size: 14px;
                            text-transform: uppercase;
                            opacity: 0.6;
                        "
                    >
                        Properties
                    </h5>
                    <div style="display: flex; flex-direction: column; gap: 16px">
                        <div>
                            <label
                                style="
                                    display: block;
                                    font-size: 12px;
                                    opacity: 0.7;
                                    margin-bottom: 6px;
                                "
                            >
                                Status
                            </label>
                            <select
                                style="
                                    width: 100%;
                                    padding: 8px;
                                    border: 1px solid var(--color_line_secondary);
                                    border-radius: 6px;
                                "
                            >
                                <option>Draft</option>
                                <option>Published</option>
                            </select>
                        </div>
                        <div>
                            <label
                                style="
                                    display: block;
                                    font-size: 12px;
                                    opacity: 0.7;
                                    margin-bottom: 6px;
                                "
                            >
                                Author
                            </label>
                            <div
                                style="
                                    display: flex;
                                    align-items: center;
                                    gap: 8px;
                                "
                            >
                                <div
                                    style="
                                        width: 28px;
                                        height: 28px;
                                        background: var(--color_fill_primary);
                                        border-radius: 50%;
                                    "
                                ></div>
                                <span style="font-size: 14px">Jane Doe</span>
                            </div>
                        </div>
                        <div>
                            <label
                                style="
                                    display: block;
                                    font-size: 12px;
                                    opacity: 0.7;
                                    margin-bottom: 6px;
                                "
                            >
                                Last Modified
                            </label>
                            <span style="font-size: 14px">Today at 2:34 PM</span>
                        </div>
                    </div>
                </aside>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!