Blazorise RouterTabs component

Automatically create tabs for each page the user navigates to.

RouterTabs is a Blazorise extension that allows you to render a tab for each navigation page. This extension is useful when you want to create a tabbed interface for your application.

To use the RouterTabs component, install the Blazorise.Components package first.

Installation

NuGet

Install extension from NuGet. 
dotnet add package Blazorise.Components

Imports

In your main _Imports.razor add: 
@using Blazorise.Components

Configuration

Register services

Incorporate RouterTabs services by adding the following code to the relevant sections of Program.cs. 
using Blazorise.Components;

builder.Services
    .AddBlazorise()
    .AddBlazoriseRouterTabs();

Provide route data

Cascade the required routeData so RouterTabs can capture it. 
<Router AppAssembly="typeof(App).Assembly">
    <Found Context="routeData">
        <CascadingValue Value="routeData">
            <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
        </CascadingValue>
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>

Configure the layout

Replace the Layout @Body RenderFragment with the RouterTabs component. RouterTabs will handle the page content rendering for you when the page that makes use of this layout is navigated to. 
@inherits LayoutComponentBase

<Div Class="layout">
    <RouterTabs />
</Div>

Tab Configuration

Use RouterTabsPageAttribute to configure how your pages will behave when rendered as tabs. 
@attribute [RouterTabsPageAttribute( Name: "Example", Closeable: true )]

Basic example

This page uses a custom layout with the RouterTabs component, try navigating between these pages, tabs will be created for each one of the navigations.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page