Advanced Options

Unlock new capabilities in your Swagger documentation with advanced features for both the Classic and Modern themes, designed to improve navigation, usability, and accessibility for developers interacting with your API documentation.

Available for Both Classic and Modern Themes

1. Sticky Operations

Keep the operations panel visible while scrolling through the API documentation.

This feature is particularly useful for large API docs, allowing you to access the operations panel at any time without needing to scroll back up.

Code example:

// Swashbuckle
app.UseSwaggerUI(ModernStyle.Dark, options =>
{
    options.EnableStickyOperations();
});

// NSwag
app.UseSwaggerUi(ModernStyle.Dark, settings =>
{
    settings.EnableStickyOperations();
});

Visual example:

Modern Themes Only

The Modern theme also offers additional features for an enhanced user experience.

2. Pinnable Topbar

Show a new option to keep the top navigation bar fixed at the top of the page as you scroll.

This ensures that you can quickly access key options, such as the API definitions dropdown, no matter where you are in the documentation.

Code example:

// Swashbuckle
app.UseSwaggerUI(ModernStyle.Dark, options =>
{
    options.EnablePinnableTopbar();
});

// NSwag
app.UseSwaggerUi(ModernStyle.Dark, settings =>
{
    settings.EnablePinnableTopbar();
});

Visual example:

3. Back to Top Button

Easily return to the top of the documentation with a single click.

This feature is particularly useful for long API documentation pages, enabling smooth navigation.

Code example:

// Swashbuckle
app.UseSwaggerUI(ModernStyle.Dark, options =>
{
    options.ShowBackToTopButton();
});

// NSwag
app.UseSwaggerUi(ModernStyle.Dark, settings =>
{
    settings.ShowBackToTopButton();
});

Visual example:

4. Expand/Collapse All Operations

Easily manage large sets of API operations with the ability to expand or collapse all operations within a tag group.

This helps developers navigate more efficiently by reducing clutter.

Code example:

// Swashbuckle
app.UseSwaggerUI(ModernStyle.Dark, options =>
{
    options.EnableExpandOrCollapseAllOperations();
});

// NSwag
app.UseSwaggerUi(ModernStyle.Dark, settings =>
{
    settings.EnableExpandOrCollapseAllOperations();
});

Visual example:

Note

The Modern style's features require JavaScript to work.

Enable All Advanced Options Simultaneously

To enable all of the above features at once, you can use the EnableAllAdvancedOptions() method. This will activate all the modern UI enhancements and improve the usability of your Swagger documentation.

Code example:

// Swashbuckle
app.UseSwaggerUI(ModernStyle.Dark, options =>
{
    options.EnableAllAdvancedOptions();
});

// NSwag
app.UseSwaggerUi(ModernStyle.Dark, settings =>
{
    settings.EnableAllAdvancedOptions();
});

Compatibility

These features work seamlessly with both Swashbuckle and NSwag, and they automatically adapt based on the selected theme (Classic or Modern).

Simply choose the theme that suits your documentation style and enable the features that best enhance your user's experience.