Feature Pinnable Topbar

Pinnable Topbar

Add a pin button to keep the top navigation bar fixed at the top of the page.

Why Use It?

• ✅ Quick Access - API definitions dropdown always accessible
• ✅ User Control - Users can pin/unpin as needed
• ✅ Persistent State - Pin state saved in local storage
• ✅ Smooth Animation - Elegant pin/unpin transitions

Visual Example

Quick Start

Swashbuckle

using AspNetCore.Swagger.Themes;

app.UseSwaggerUI(Theme.Dark, options =>
{
    options.EnablePinnableTopbar();
});

NSwag

using AspNetCore.Swagger.Themes;

app.UseSwaggerUi(Theme.Dark, settings =>
{
    settings.EnablePinnableTopbar();
});

Customization

Style the pinned topbar:

:root {
    --topbar-pinned-background-color: #your-color;
    --topbar-pinned-shadow-color: rgba(0, 0, 0, 0.3);
    --topbar-pin-icon-color: #your-icon-color;
}

Compatibility

Works with:

• ✅ All predefined themes
• ✅ Custom themes
• ✅ All other advanced features
• ✅ Theme Switcher

Next Steps

• Customize with CSS Variables - Fine-tune topbar appearance
• Enable Other Features - Combine with other UI enhancements
• Explore All Features - See what else is available

---

← Back to Advanced Options