diff --git a/ROADMAP.md b/ROADMAP.md
index be67dd7..9788f53 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -1,4 +1,4 @@
-# Blazor UI Kit Roadmap � Bootstrap Italia Components
+# Blazor UI Kit Roadmap — Bootstrap Italia Components
 
 This document outlines the development roadmap for a Blazor UI kit library implementing the official [Bootstrap Italia](https://italia.github.io/bootstrap-italia/docs) components. The project targets .NET 9.
 
diff --git a/docs/README.md b/docs/README.md
index 3a77d84..a935133 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -76,6 +76,13 @@ Pagination control for navigating large data sets across multiple pages.
 - Optional jump-to-page input and total-items summary
 - Customizable previous/next buttons and alignment
 
+#### [Toolbar](components/toolbar.md)
+Navigation toolbar for grouping icon-based action items.
+- Horizontal and vertical orientations
+- Three size variants (default, medium, small)
+- Badge counts and labels on items
+- `BitToolbarDivider` sub-component for visual separation
+
 ### Form Components
 
 BitBlazor provides a comprehensive set of form components that integrate seamlessly with ASP.NET Core Blazor's form system and Bootstrap Italia styling.
diff --git a/docs/components/toolbar.md b/docs/components/toolbar.md
new file mode 100644
index 0000000..eeae6f5
--- /dev/null
+++ b/docs/components/toolbar.md
@@ -0,0 +1,190 @@
+# BitToolbar
+
+The `BitToolbar` component represents a [toolbar using Bootstrap Italia styles](https://italia.github.io/bootstrap-italia/docs/menu-di-navigazione/toolbar/).
+
+## Namespace
+
+```csharp
+BitBlazor.Components
+```
+
+## Description
+
+The Toolbar component provides a navigation bar for grouping and displaying icon-based action items. It supports horizontal and vertical orientations, three size variants, optional badge counts, and a divider sub-component. Items support an active and a disabled state, and are compatible with both static (SSR) and interactive rendering modes.
+
+Each `BitToolbarItem` can be used as a navigation link (via `Href`), a click handler (via `OnClick`), or both at the same time. When both are provided, `OnClick` takes precedence in interactive rendering while `Href` remains available for browser-native behaviors such as right-click → Open in new tab. In static SSR rendering, `Href` is the only navigation mechanism.
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `BitToolbar` | Root container that renders a `<nav>` with an inner `<ul>` and cascades itself to child items |
+| `BitToolbarItem` | Individual action item rendered as an `<li>` with an icon and a label |
+| `BitToolbarDivider` | Visual and semantic separator between items |
+
+## BitToolbar Parameters
+
+| Name | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `ChildContent` | `RenderFragment` | ✓ | - | One or more `BitToolbarItem` or `BitToolbarDivider` components to render inside the toolbar |
+| `Size` | `ToolbarSize` | ✗ | `ToolbarSize.Default` | Controls the visual size of the toolbar |
+| `Orientation` | `Orientation` | ✗ | `Orientation.Horizontal` | Determines whether the toolbar is laid out horizontally or vertically |
+| `Id` | `string?` | ✗ | `null` | Sets the `id` HTML attribute on the root element |
+| `CssClass` | `string?` | ✗ | `null` | Additional CSS classes to apply to the root `<nav>` element |
+| `AdditionalAttributes` | `IDictionary<string, object>?` | ✗ | - | Additional HTML attributes forwarded to the root element |
+
+## BitToolbarItem Parameters
+
+| Name | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `Label` | `string` | ✓ | - | The visible label text for the item |
+| `IconName` | `string` | ✓ | - | The Bootstrap Italia icon name to display |
+| `Href` | `string?` | ✗ | `null` | The URL the item links to. In SSR rendering the browser follows this URL on click. In interactive rendering it is a navigation fallback when `OnClick` has no delegate, and a secondary browser target (right-click, Ctrl+Click) when `OnClick` is set. |
+| `Active` | `bool` | ✗ | `false` | When `true`, applies the active style to the item |
+| `Disabled` | `bool` | ✗ | `false` | When `true`, disables the item and adds `aria-disabled="true"` |
+| `BadgeCount` | `int?` | ✗ | `null` | A numeric badge count shown on the item; hidden when `null` or `0` |
+| `BadgeLabel` | `string?` | ✗ | `null` | A text label shown next to the badge; displayed in different positions depending on `Size` |
+| `OnClick` | `EventCallback` | ✗ | - | Primary interactive callback invoked when the item is clicked. Takes precedence over `Href` navigation in interactive rendering. Not invoked during static (SSR) rendering — provide `Href` as a navigation fallback for SSR contexts. |
+| `Id` | `string?` | ✗ | `null` | Sets the `id` HTML attribute on the root element |
+| `CssClass` | `string?` | ✗ | `null` | Additional CSS classes to apply to the item |
+| `AdditionalAttributes` | `IDictionary<string, object>?` | ✗ | - | Additional HTML attributes forwarded to the root element |
+
+## Used Enumerations
+
+### ToolbarSize
+
+| Value | Description |
+|-------|-------------|
+| `Default` | Standard size; badge count and badge label are shown inline next to the label |
+| `Medium` | Reduced size; badge label is shown in the badge wrapper area instead of next to the label |
+| `Small` | Smallest size; badge count is hidden and only the badge label is shown |
+
+### Orientation
+
+| Value | Description |
+|-------|-------------|
+| `Horizontal` | Items are arranged from left to right (default) |
+| `Vertical` | Items are stacked from top to bottom |
+
+## Usage Examples
+
+### Basic horizontal toolbar
+
+```razor
+<BitToolbar>
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" />
+    <BitToolbarItem IconName="it-settings" Label="Settings" Href="/settings" />
+</BitToolbar>
+```
+
+### With active and disabled items
+
+```razor
+<BitToolbar>
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" Active="true" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" />
+    <BitToolbarItem IconName="it-lock" Label="Locked" Disabled="true" />
+</BitToolbar>
+```
+
+### With divider
+
+```razor
+<BitToolbar>
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" />
+    <BitToolbarDivider />
+    <BitToolbarItem IconName="it-settings" Label="Settings" Href="/settings" />
+</BitToolbar>
+```
+
+### With badge count and label
+
+```razor
+<BitToolbar>
+    <BitToolbarItem IconName="it-mail" Label="Messages" BadgeCount="5" BadgeLabel="new" />
+    <BitToolbarItem IconName="it-bell" Label="Notifications" BadgeCount="12" />
+</BitToolbar>
+```
+
+### Medium size
+
+```razor
+<BitToolbar Size="ToolbarSize.Medium">
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" />
+    <BitToolbarItem IconName="it-settings" Label="Settings" Href="/settings" />
+</BitToolbar>
+```
+
+### Small size
+
+```razor
+<BitToolbar Size="ToolbarSize.Small">
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" />
+    <BitToolbarItem IconName="it-settings" Label="Settings" Href="/settings" />
+</BitToolbar>
+```
+
+### Vertical orientation
+
+```razor
+<BitToolbar Orientation="Orientation.Vertical">
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" />
+    <BitToolbarItem IconName="it-settings" Label="Settings" Href="/settings" />
+</BitToolbar>
+```
+
+### With click callback
+
+```razor
+<BitToolbar>
+    <BitToolbarItem IconName="it-download" Label="Download" OnClick="HandleDownload" />
+    <BitToolbarItem IconName="it-delete" Label="Delete" OnClick="HandleDelete" />
+</BitToolbar>
+
+@code {
+    private void HandleDownload() { /* ... */ }
+    private void HandleDelete() { /* ... */ }
+}
+```
+
+### Navigation items (SSR-compatible)
+
+When only `Href` is provided the item works as a plain navigation link in both SSR and interactive rendering.
+
+```razor
+<BitToolbar>
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" />
+    <BitToolbarDivider />
+    <BitToolbarItem IconName="it-settings" Label="Settings" Href="/settings" />
+</BitToolbar>
+```
+
+### Mixed mode (OnClick takes precedence)
+
+When both `Href` and `OnClick` are provided, `OnClick` handles the primary click in interactive rendering. `Href` is still rendered on the `<a>` element so that right-click → Open in new tab continues to work.
+
+```razor
+<BitToolbar>
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" OnClick="HandleHome" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" OnClick="HandleSearch" />
+</BitToolbar>
+
+@code {
+    private void HandleHome() { /* custom SPA navigation or analytics */ }
+    private void HandleSearch() { /* open search panel */ }
+}
+```
+
+### With additional attributes
+
+```razor
+<BitToolbar data-testid="main-toolbar" aria-label="Main actions">
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" />
+</BitToolbar>
+```
diff --git a/docs/quick-reference.md b/docs/quick-reference.md
index 69984ba..d64f2f9 100644
--- a/docs/quick-reference.md
+++ b/docs/quick-reference.md
@@ -110,6 +110,30 @@ This guide provides a quick overview of all BitBlazor components with basic exam
 </BitPagination>
 ```
 
+### Toolbar
+```razor
+<!-- Basic horizontal toolbar -->
+<BitToolbar>
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" />
+    <BitToolbarItem IconName="it-settings" Label="Settings" Href="/settings" />
+</BitToolbar>
+
+<!-- With active item, disabled item, and divider -->
+<BitToolbar>
+    <BitToolbarItem IconName="it-home" Label="Home" Href="/" Active="true" />
+    <BitToolbarItem IconName="it-search" Label="Search" Href="/search" />
+    <BitToolbarDivider />
+    <BitToolbarItem IconName="it-lock" Label="Locked" Disabled="true" />
+</BitToolbar>
+
+<!-- Small vertical toolbar with badge -->
+<BitToolbar Size="ToolbarSize.Small" Orientation="Orientation.Vertical">
+    <BitToolbarItem IconName="it-mail" Label="Messages" BadgeCount="5" BadgeLabel="new" />
+    <BitToolbarItem IconName="it-bell" Label="Notifications" BadgeCount="3" />
+</BitToolbar>
+```
+
 ## Form Components
 
 ### BitTextField
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor
index 8cd8d31..3854733 100644
--- a/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor
@@ -14,6 +14,31 @@
     </p>
 </div>
 
+<!-- Azioni rapide -->
+<div class="mb-3">
+    <BitToolbar>
+        <BitToolbarItem IconName="@Icons.ItPlusCircle"
+                        Label="Nuova Pratica"
+                        Active="@(_activeToolbarItem == "nuova-pratica")"
+                        OnClick="NuovaPraticaAsync" />
+        <BitToolbarItem IconName="@Icons.ItDownload"
+                        Label="Scarica"
+                        BadgeCount="3"
+                        BadgeLabel="in scadenza"
+                        Active="@(_activeToolbarItem == "scarica")"
+                        OnClick="ScaricaAsync" />
+        <BitToolbarItem IconName="@Icons.ItPrint"
+                        Label="Stampa"
+                        Active="@(_activeToolbarItem == "stampa")"
+                        OnClick="StampaAsync" />
+        <BitToolbarDivider />
+        <BitToolbarItem IconName="@Icons.ItSettings"
+                        Label="Impostazioni"
+                        Active="@(_activeToolbarItem == "impostazioni")"
+                        OnClick="ImpostazioniAsync" />
+    </BitToolbar>
+</div>
+
 <!-- Filtri stato -->
 <div class="d-flex flex-wrap gap-2 mb-4" role="group" aria-label="Filtra per stato">
     @foreach (var filtro in StatiFiltro)
@@ -103,6 +128,7 @@ else
 
     private int currentPage = 1;
     private string? statoFiltroAttivo;
+    private string? _activeToolbarItem;
     private PraticheResult? result;
     private int totalPages;
 
@@ -143,4 +169,28 @@ else
         "In Attesa"      => Color.Warning,
         _                => Color.Secondary
     };
+
+    private async Task NuovaPraticaAsync()
+    {
+        _activeToolbarItem = _activeToolbarItem == "nuova-pratica" ? null : "nuova-pratica";
+        await InvokeAsync(StateHasChanged);
+    }
+
+    private Task ScaricaAsync()
+    {
+        _activeToolbarItem = _activeToolbarItem == "scarica" ? null : "scarica";
+        return Task.CompletedTask;
+    }
+
+    private Task StampaAsync()
+    {
+        _activeToolbarItem = _activeToolbarItem == "stampa" ? null : "stampa";
+        return Task.CompletedTask;
+    }
+
+    private Task ImpostazioniAsync()
+    {
+        _activeToolbarItem = _activeToolbarItem == "impostazioni" ? null : "impostazioni";
+        return Task.CompletedTask;
+    }
 }
diff --git a/src/BitBlazor/Components/Toolbar/BitToolbar.razor b/src/BitBlazor/Components/Toolbar/BitToolbar.razor
new file mode 100644
index 0000000..ce09c05
--- /dev/null
+++ b/src/BitBlazor/Components/Toolbar/BitToolbar.razor
@@ -0,0 +1,11 @@
+@namespace BitBlazor.Components
+
+@inherits BitComponentBase
+
+<nav class="@ComputeContainerCssClass()" @attributes="AdditionalAttributes">
+    <ul>
+        <CascadingValue Value="this">
+            @ChildContent
+        </CascadingValue>
+    </ul>
+</nav>
diff --git a/src/BitBlazor/Components/Toolbar/BitToolbar.razor.cs b/src/BitBlazor/Components/Toolbar/BitToolbar.razor.cs
new file mode 100644
index 0000000..9f6d833
--- /dev/null
+++ b/src/BitBlazor/Components/Toolbar/BitToolbar.razor.cs
@@ -0,0 +1,69 @@
+using BitBlazor.Core;
+using Microsoft.AspNetCore.Components;
+
+namespace BitBlazor.Components;
+
+/// <summary>
+/// Represents a toolbar component that can contain multiple <see cref="BitToolbarItem"/> components. It provides a container for organizing and displaying toolbar items
+/// </summary>
+public partial class BitToolbar : BitComponentBase
+{
+    /// <summary>
+    /// Gets or sets the content to be rendered inside the toolbar. 
+    /// This can include one or more <see cref="BitToolbarItem"/> components,
+    /// optionally separated by <see cref="BitToolbarDivider"/> components.
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public RenderFragment ChildContent { get; set; }
+
+    /// <summary>
+    /// Gets or sets the size of the toolbar. 
+    /// This property allows you to specify the visual size of the toolbar, which can affect its layout and appearance. 
+    /// The default value is <see cref="ToolbarSize.Default"/>.
+    /// </summary>
+    [Parameter]
+    public ToolbarSize Size { get; set; } = ToolbarSize.Default;
+
+    /// <summary>
+    /// Gets or sets the orientation of the toolbar. 
+    /// This property determines whether the toolbar items are arranged horizontally or vertically. 
+    /// The default value is <see cref="Orientation.Horizontal"/>.
+    /// </summary>
+    [Parameter]
+    public Orientation Orientation { get; set; } = Orientation.Horizontal;
+
+    private string ComputeContainerCssClass()
+    {
+        var builder = new CssClassBuilder("toolbar");
+        AddSizeClass(builder);
+        AddOrientationClass(builder);
+
+        AddCustomCssClass(builder);
+
+        return builder.Build();
+    }
+
+    private void AddOrientationClass(CssClassBuilder builder)
+    {
+        var orientationClass = Orientation switch
+        {
+            Orientation.Vertical => "toolbar-vertical",
+            _ => string.Empty
+        };
+
+        builder.Add(orientationClass);
+    }
+
+    private void AddSizeClass(CssClassBuilder builder)
+    {
+        var sizeClass = Size switch
+        {
+            ToolbarSize.Small => "toolbar-small",
+            ToolbarSize.Medium => "toolbar-medium",
+            _ => string.Empty
+        };
+
+        builder.Add(sizeClass);
+    }
+}
diff --git a/src/BitBlazor/Components/Toolbar/BitToolbarDivider.razor b/src/BitBlazor/Components/Toolbar/BitToolbarDivider.razor
new file mode 100644
index 0000000..0f56b31
--- /dev/null
+++ b/src/BitBlazor/Components/Toolbar/BitToolbarDivider.razor
@@ -0,0 +1,3 @@
+@namespace BitBlazor.Components
+
+<li class="toolbar-divider" role="separator" aria-orientation="vertical"></li>
diff --git a/src/BitBlazor/Components/Toolbar/BitToolbarDivider.razor.cs b/src/BitBlazor/Components/Toolbar/BitToolbarDivider.razor.cs
new file mode 100644
index 0000000..8ed3294
--- /dev/null
+++ b/src/BitBlazor/Components/Toolbar/BitToolbarDivider.razor.cs
@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+
+namespace BitBlazor.Components;
+
+public partial class BitToolbarDivider
+{
+    [CascadingParameter]
+    BitToolbar Parent { get; set; } = default!;
+
+    /// <inheritdoc/>
+    protected override void OnInitialized()
+    {
+        if (Parent is null)
+        {
+            throw new InvalidOperationException("BitToolbarDivider component must be used inside a BitToolbar component");
+        }
+    }
+}
diff --git a/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor b/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor
new file mode 100644
index 0000000..6fbd32a
--- /dev/null
+++ b/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor
@@ -0,0 +1,33 @@
+@namespace BitBlazor.Components
+
+<li>
+    <a href="@Href" class="@ComputeLinkCssClass()" disabled="@Disabled" @attributes="AdditionalAttributes" @onclick="ClickAsync" @onclick:preventDefault="@RendererInfo.IsInteractive" @onkeydown="OnKeyDownAsync">
+        @if (HasBadge)
+        {
+            <div class="badge-wrapper">
+                <span class="toolbar-badge">
+                    @if (IsToolbarSizeDefault)
+                    {
+                        @BadgeCount
+                    }
+                </span>
+                @if (Parent.Size is ToolbarSize.Medium or ToolbarSize.Small && HasBadgeLabel)
+                {
+                    @RenderBadgeLabel()
+                }
+            </div>
+        }
+        <BitIcon IconName="@IconName" />
+        <span class="@ComputeLabelCssClass()">
+            @Label
+            @if (Parent.Size is ToolbarSize.Default && HasBadgeLabel)
+            {
+                @RenderBadgeLabel()
+            }
+        </span>
+    </a>
+</li>
+
+@code {
+    private RenderFragment RenderBadgeLabel() => @<span class="visually-hidden">@BadgeLabel</span>;
+}
diff --git a/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs b/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs
new file mode 100644
index 0000000..a288ef3
--- /dev/null
+++ b/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs
@@ -0,0 +1,169 @@
+using BitBlazor.Core;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace BitBlazor.Components;
+
+/// <summary>
+/// Represents a toolbar item component that can be used within a <see cref="BitToolbar"/> component.
+/// </summary>
+public partial class BitToolbarItem
+{
+    [CascadingParameter]
+    BitToolbar Parent { get; set; } = default!;
+
+    [Inject]
+    private NavigationManager NavigationManager { get; set; } = default!;
+
+    /// <summary>
+    /// Gets or sets the label for the toolbar item.
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public string Label { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the name of the icon to be displayed for the toolbar item.
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public string IconName { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the URL that the toolbar item should link to.
+    /// In SSR rendering, the browser follows this URL directly on click.
+    /// In interactive rendering, this URL is used as a navigation fallback when <see cref="OnClick"/> has no delegate,
+    /// and as a secondary browser behavior target (right-click, Ctrl+Click) when <see cref="OnClick"/> is set.
+    /// When both <see cref="Href"/> and <see cref="OnClick"/> are set, <see cref="OnClick"/> takes precedence for primary interaction.
+    /// </summary>
+    [Parameter]
+    public string? Href { get; set; }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the toolbar item is active. When set to true, the item will be styled as active.
+    /// </summary>
+    [Parameter]
+    public bool Active { get; set; }
+
+    /// <summary>
+    /// Gets or sets whether the toolbar item is disabled. When set to true, the item will be styled as disabled and will not respond to user interactions.
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; }
+
+    /// <summary>
+    /// Gets or sets the count to be displayed as a badge on the toolbar item. If set, a badge will be shown with the specified count.
+    /// </summary>
+    [Parameter]
+    public int? BadgeCount { get; set; }
+
+    /// <summary>
+    /// Gets or sets the label for the badge on the toolbar item. This label can provide additional context for the badge count.
+    /// </summary>
+    [Parameter]
+    public string? BadgeLabel { get; set; }
+
+    /// <summary>
+    /// Gets or sets the primary interactive callback, invoked when the toolbar item is clicked.
+    /// When set, it takes precedence over <see cref="Href"/> navigation in interactive rendering.
+    /// Not invoked during static (SSR) rendering — provide <see cref="Href"/> as a navigation fallback for SSR contexts.
+    /// </summary>
+    [Parameter]
+    public EventCallback OnClick { get; set; }
+
+    /// <summary>
+    /// Gets or sets additional attributes that do not match any of the explicitly defined parameters.
+    /// </summary>
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IDictionary<string, object> AdditionalAttributes { get; set; } = new Dictionary<string, object>();
+
+    private bool HasBadgeNumber => BadgeCount.HasValue && BadgeCount.Value > 0;
+
+    private bool HasBadgeLabel => !string.IsNullOrWhiteSpace(BadgeLabel);
+
+    private bool HasBadge => HasBadgeNumber || HasBadgeLabel;
+
+    private bool IsToolbarSizeDefault => Parent.Size is ToolbarSize.Default;
+
+    /// <inheritdoc/>
+    protected override void OnInitialized()
+    {
+        if (Parent is null)
+        {
+            throw new InvalidOperationException("BitToolbarItem component must be used inside a BitToolbar component");
+        }
+    }
+
+    /// <inheritdoc/>
+    protected override void OnParametersSet()
+    {
+        SetDisabled();
+    }
+
+    private void SetDisabled()
+    {
+        if (Disabled)
+        {
+            AdditionalAttributes["aria-disabled"] = "true";
+        }
+        else
+        {
+            AdditionalAttributes.Remove("aria-disabled");
+        }
+    }
+
+    private string ComputeLinkCssClass()
+    {
+        var builder = new CssClassBuilder();
+        
+        if (Active)
+        {
+            builder.Add("active");
+        }
+
+        if (Disabled)
+        {
+            builder.Add("disabled");
+        }
+
+        return builder.Build();
+    }
+
+    private string ComputeLabelCssClass()
+    {
+        var builder = new CssClassBuilder();
+        
+        var labelClass = Parent.Size switch
+        {
+            ToolbarSize.Medium or ToolbarSize.Small => "visually-hidden",
+            _ => "toolbar-label"
+        };
+        builder.Add(labelClass);
+
+
+        return builder.Build();
+    }
+
+    private async Task ClickAsync()
+    {
+        if (Disabled)
+            return;
+
+        if (OnClick.HasDelegate)
+        {
+            await OnClick.InvokeAsync();
+        }
+        else if (Href is not null)
+        {
+            NavigationManager.NavigateTo(Href);
+        }
+    }
+
+    private async Task OnKeyDownAsync(KeyboardEventArgs args)
+    {
+        if (args.Key is "Enter" or " ")
+        {
+            await ClickAsync();
+        }
+    }
+}
diff --git a/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.css b/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.css
new file mode 100644
index 0000000..903e9bf
--- /dev/null
+++ b/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.css
@@ -0,0 +1,3 @@
+a {
+    cursor: pointer;
+}
diff --git a/src/BitBlazor/Components/Toolbar/ToolbarSize.cs b/src/BitBlazor/Components/Toolbar/ToolbarSize.cs
new file mode 100644
index 0000000..84220e3
--- /dev/null
+++ b/src/BitBlazor/Components/Toolbar/ToolbarSize.cs
@@ -0,0 +1,22 @@
+namespace BitBlazor.Components;
+
+/// <summary>
+/// Defines the size options for a toolbar component. This enumeration is used to specify the size of the toolbar, allowing for different visual styles and layouts based on the selected size.
+/// </summary>
+public enum ToolbarSize
+{
+    /// <summary>
+    /// The default size for the toolbar
+    /// </summary>
+    Default,
+
+    /// <summary>
+    /// The medium size for the toolbar, which is smaller than the default size but larger than the small size.
+    /// </summary>
+    Medium,
+
+    /// <summary>
+    /// The small size for the toolbar.
+    /// </summary>
+    Small
+}
diff --git a/src/BitBlazor/Orientation.cs b/src/BitBlazor/Orientation.cs
new file mode 100644
index 0000000..8aa3832
--- /dev/null
+++ b/src/BitBlazor/Orientation.cs
@@ -0,0 +1,17 @@
+namespace BitBlazor;
+
+/// <summary>
+/// Defines the orientation options for a component.
+/// </summary>
+public enum Orientation
+{
+    /// <summary>
+    /// Vertical orientation
+    /// </summary>
+    Vertical,
+
+    /// <summary>
+    /// Horizontal orientation
+    /// </summary>
+    Horizontal
+}
diff --git a/stories/BitBlazor.Stories/Components/Stories/Components/BitToolbar.stories.razor b/stories/BitBlazor.Stories/Components/Stories/Components/BitToolbar.stories.razor
new file mode 100644
index 0000000..094b47a
--- /dev/null
+++ b/stories/BitBlazor.Stories/Components/Stories/Components/BitToolbar.stories.razor
@@ -0,0 +1,160 @@
+@attribute [Stories("Components/BitToolbar")]
+
+<Stories TComponent="BitToolbar">
+
+    <ArgType For="_ => _.Size" Control="ControlType.Select" DefaultValue="ToolbarSize.Default" />
+    <ArgType For="_ => _.Orientation" Control="ControlType.Select" DefaultValue="Orientation.Horizontal" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _.Size" Value="ToolbarSize.Default" />
+            <Arg For="_ => _.Orientation" Value="Orientation.Horizontal" />
+        </Arguments>
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar @attributes="context.Args">
+                    <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" />
+                    <BitToolbarItem Label="User" IconName="@Icons.ItUser" />
+                    <BitToolbarItem Label="Notifications" IconName="@Icons.ItHorn" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Medium size">
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar Size="ToolbarSize.Medium">
+                    <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" />
+                    <BitToolbarItem Label="User" IconName="@Icons.ItUser" />
+                    <BitToolbarItem Label="Notifications" IconName="@Icons.ItHorn" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Small size">
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar Size="ToolbarSize.Small">
+                    <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" />
+                    <BitToolbarItem Label="User" IconName="@Icons.ItUser" />
+                    <BitToolbarItem Label="Notifications" IconName="@Icons.ItHorn" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Active Item">
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar>
+                    <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" Active="true" />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" />
+                    <BitToolbarItem Label="User" IconName="@Icons.ItUser" />
+                    <BitToolbarItem Label="Close" IconName="@Icons.ItCloseBig" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Disabled Item">
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar>
+                    <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" Disabled="true" />
+                    <BitToolbarItem Label="User" IconName="@Icons.ItUser" />
+                    <BitToolbarItem Label="Close" IconName="@Icons.ItCloseBig" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="With Divider">
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar>
+                    <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" />
+                    <BitToolbarItem Label="User" IconName="@Icons.ItUser" />
+                    <BitToolbarDivider />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" />
+                    <BitToolbarItem Label="Notifications" IconName="@Icons.ItHorn" />
+                    <BitToolbarDivider />
+                    <BitToolbarItem Label="Close" IconName="@Icons.ItCloseBig" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Mixed States">
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar>
+                    <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" Active="true" />
+                    <BitToolbarItem Label="User" IconName="@Icons.ItUser" />
+                    <BitToolbarDivider />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" Disabled="true" />
+                    <BitToolbarItem Label="Notifications" IconName="@Icons.ItHorn" />
+                    <BitToolbarDivider />
+                    <BitToolbarItem Label="Close" IconName="@Icons.ItCloseBig" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Toolbar with badge">
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar>
+                    <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" />
+                    <BitToolbarItem Label="Messages" IconName="@Icons.ItMail" BadgeCount="3" BadgeLabel="3 unread messages" />
+                    <BitToolbarItem Label="User" IconName="@Icons.ItUser" />
+                    <BitToolbarItem Label="Notifications" IconName="@Icons.ItHorn" BadgeCount="7" BadgeLabel="7 unread notifications" />
+                    <BitToolbarDivider />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Badge on sizes">
+        <Arguments>
+            <Arg For="_ => _.Size" Value="ToolbarSize.Default" />
+        </Arguments>
+
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar @attributes="@context.Args">
+                    <BitToolbarItem Label="Messages" IconName="@Icons.ItMail" BadgeCount="3" BadgeLabel="3 unread messages" />
+                    <BitToolbarItem Label="Notifications" IconName="@Icons.ItHorn" BadgeCount="7" BadgeLabel="7 unread notifications" />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Vertical toolbar">
+        <Arguments>
+            <Arg For="_ => _.Size" Value="ToolbarSize.Default" />
+        </Arguments>
+
+        <Template>
+            <div class="py-2 px-2">
+                <BitToolbar @attributes="context.Args" Orientation="Orientation.Vertical">
+                    <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" />
+                    <BitToolbarItem Label="Messages" IconName="@Icons.ItMail" BadgeCount="3" BadgeLabel="3 unread messages" />
+                    <BitToolbarDivider />
+                    <BitToolbarItem Label="User" IconName="@Icons.ItUser" />
+                    <BitToolbarItem Label="Notifications" IconName="@Icons.ItHorn" BadgeCount="7" BadgeLabel="7 unread notifications" />
+                    <BitToolbarDivider />
+                    <BitToolbarItem Label="Settings" IconName="@Icons.ItSettings" />
+                </BitToolbar>
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/tests/BitBlazor.Test/Components/Toolbar/BitToolbarTest.Behaviors.cs b/tests/BitBlazor.Test/Components/Toolbar/BitToolbarTest.Behaviors.cs
new file mode 100644
index 0000000..943c7f2
--- /dev/null
+++ b/tests/BitBlazor.Test/Components/Toolbar/BitToolbarTest.Behaviors.cs
@@ -0,0 +1,227 @@
+using BitBlazor.Components;
+using BitBlazor.Utilities;
+using Bunit;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace BitBlazor.Test.Components.Toolbar;
+
+public class BitToolbarTest
+{
+    [Fact]
+    public void BitToolbar_Should_Handle_Item_Click_Event()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        bool clicked = false;
+        Action onItemClick = () => clicked = true;
+
+        // Arrange
+        var cut = ctx.Render<BitToolbar>(parameters => parameters
+            .AddChildContent<BitToolbarItem>(childParameters =>
+            {
+                childParameters.Add(p => p.Label, "Item 1");
+                childParameters.Add(p => p.IconName, Icons.ItComment);
+                childParameters.Add(p => p.OnClick, onItemClick);
+            })
+        );
+
+        // Act
+        cut.Find("a").Click();
+        // Assert
+        Assert.True(clicked);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Not_Fire_OnClick_When_Item_Is_Disabled()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        bool clicked = false;
+        Action onItemClick = () => clicked = true;
+
+        var cut = ctx.Render<BitToolbar>(parameters => parameters
+            .AddChildContent<BitToolbarItem>(childParameters =>
+            {
+                childParameters.Add(p => p.Label, "Item 1");
+                childParameters.Add(p => p.IconName, Icons.ItComment);
+                childParameters.Add(p => p.Disabled, true);
+                childParameters.Add(p => p.OnClick, onItemClick);
+            })
+        );
+
+        cut.Find("a").Click();
+
+        Assert.False(clicked);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Navigate_When_Href_Is_Provided_And_No_OnClick()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        var cut = ctx.Render<BitToolbar>(parameters => parameters
+            .AddChildContent<BitToolbarItem>(childParameters =>
+            {
+                childParameters.Add(p => p.Label, "Item 1");
+                childParameters.Add(p => p.IconName, Icons.ItComment);
+                childParameters.Add(p => p.Href, "/settings");
+            })
+        );
+
+        cut.Find("a").Click();
+
+        var navManager = ctx.Services.GetRequiredService<NavigationManager>();
+        Assert.Equal("http://localhost/settings", navManager.Uri);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Not_Navigate_When_Neither_Href_Nor_OnClick_Is_Set()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        var navManager = ctx.Services.GetRequiredService<NavigationManager>();
+        var initialUri = navManager.Uri;
+
+        var cut = ctx.Render<BitToolbar>(parameters => parameters
+            .AddChildContent<BitToolbarItem>(childParameters =>
+            {
+                childParameters.Add(p => p.Label, "Item 1");
+                childParameters.Add(p => p.IconName, Icons.ItComment);
+            })
+        );
+
+        cut.Find("a").Click();
+
+        Assert.Equal(initialUri, navManager.Uri);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Prefer_OnClick_Over_Href_When_Both_Are_Set()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        var navManager = ctx.Services.GetRequiredService<NavigationManager>();
+        var initialUri = navManager.Uri;
+
+        bool clicked = false;
+        Action onItemClick = () => clicked = true;
+
+        var cut = ctx.Render<BitToolbar>(parameters => parameters
+            .AddChildContent<BitToolbarItem>(childParameters =>
+            {
+                childParameters.Add(p => p.Label, "Item 1");
+                childParameters.Add(p => p.IconName, Icons.ItComment);
+                childParameters.Add(p => p.Href, "/settings");
+                childParameters.Add(p => p.OnClick, onItemClick);
+            })
+        );
+
+        cut.Find("a").Click();
+
+        Assert.True(clicked);
+        Assert.Equal(initialUri, navManager.Uri);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Activate_Item_On_Enter_Key()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        bool clicked = false;
+        Action onItemClick = () => clicked = true;
+
+        var cut = ctx.Render<BitToolbar>(parameters => parameters
+            .AddChildContent<BitToolbarItem>(childParameters =>
+            {
+                childParameters.Add(p => p.Label, "Item 1");
+                childParameters.Add(p => p.IconName, Icons.ItComment);
+                childParameters.Add(p => p.OnClick, onItemClick);
+            })
+        );
+
+        cut.Find("a").KeyDown(new KeyboardEventArgs { Key = "Enter" });
+
+        Assert.True(clicked);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Activate_Item_On_Space_Key()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        bool clicked = false;
+        Action onItemClick = () => clicked = true;
+
+        var cut = ctx.Render<BitToolbar>(parameters => parameters
+            .AddChildContent<BitToolbarItem>(childParameters =>
+            {
+                childParameters.Add(p => p.Label, "Item 1");
+                childParameters.Add(p => p.IconName, Icons.ItComment);
+                childParameters.Add(p => p.OnClick, onItemClick);
+            })
+        );
+
+        cut.Find("a").KeyDown(new KeyboardEventArgs { Key = " " });
+
+        Assert.True(clicked);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Not_Activate_Item_On_Key_When_Disabled()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        bool clicked = false;
+        Action onItemClick = () => clicked = true;
+
+        var cut = ctx.Render<BitToolbar>(parameters => parameters
+            .AddChildContent<BitToolbarItem>(childParameters =>
+            {
+                childParameters.Add(p => p.Label, "Item 1");
+                childParameters.Add(p => p.IconName, Icons.ItComment);
+                childParameters.Add(p => p.Disabled, true);
+                childParameters.Add(p => p.OnClick, onItemClick);
+            })
+        );
+
+        cut.Find("a").KeyDown(new KeyboardEventArgs { Key = "Enter" });
+
+        Assert.False(clicked);
+    }
+
+    [Fact]
+    public void BitToolbarItem_Should_Throw_InvalidOperationException_When_Used_Outside_BitToolbar()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        var exception = Assert.Throws<InvalidOperationException>(() =>
+            ctx.Render<BitToolbarItem>(parameters => parameters
+                .Add(p => p.Label, "Item 1")
+                .Add(p => p.IconName, Icons.ItComment)));
+
+        Assert.Equal("BitToolbarItem component must be used inside a BitToolbar component", exception.Message);
+    }
+
+    [Fact]
+    public void BitToolbarDivider_Should_Throw_InvalidOperationException_When_Used_Outside_BitToolbar()
+    {
+        using var ctx = new BunitContext();
+        ctx.SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+
+        var exception = Assert.Throws<InvalidOperationException>(() =>
+            ctx.Render<BitToolbarDivider>());
+
+        Assert.Equal("BitToolbarDivider component must be used inside a BitToolbar component", exception.Message);
+    }
+}
diff --git a/tests/BitBlazor.Test/Components/Toolbar/BitToolbarTest.Rendering.razor b/tests/BitBlazor.Test/Components/Toolbar/BitToolbarTest.Rendering.razor
new file mode 100644
index 0000000..b024f17
--- /dev/null
+++ b/tests/BitBlazor.Test/Components/Toolbar/BitToolbarTest.Rendering.razor
@@ -0,0 +1,561 @@
+@inherits BunitContext
+
+@code {
+    public BitToolbarTest_Rendering()
+    {
+        SetRendererInfo(new RendererInfo("InteractiveServer", isInteractive: true));
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Default_Markup_Correctly()
+    {
+        var component = Render(
+            @<BitToolbar>
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="toolbar-label">messages</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="toolbar-label">images</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="toolbar-label">documents</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="toolbar-label">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="toolbar-label">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Medium_Toolbar_Correctly()
+    {
+        var component = Render(
+            @<BitToolbar Size="ToolbarSize.Medium">
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar toolbar-medium">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="visually-hidden">messages</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="visually-hidden">images</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="visually-hidden">documents</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="visually-hidden">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="visually-hidden">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Small_Toolbar_Correctly()
+    {
+        var component = Render(
+            @<BitToolbar Size="ToolbarSize.Small">
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar toolbar-small">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="visually-hidden">messages</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="visually-hidden">images</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="visually-hidden">documents</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="visually-hidden">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="visually-hidden">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Disabled_Items_Correctly()
+    {
+        var component = Render(
+            @<BitToolbar>
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Disabled="true" Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="toolbar-label">messages</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="toolbar-label">images</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="toolbar-label">documents</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="toolbar-label">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="disabled" disabled aria-disabled="true">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="toolbar-label">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Divider_Correctly()
+    {
+        var component = Render(
+            @<BitToolbar>
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarDivider />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="toolbar-label">messages</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="toolbar-label">images</span>
+                        </a>
+                    </li>
+                    <li class="toolbar-divider" role="separator" aria-orientation="vertical"></li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="toolbar-label">documents</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="toolbar-label">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="toolbar-label">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Badges_Correctly()
+    {
+        var component = Render(
+            @<BitToolbar>
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" BadgeCount="1" BadgeLabel="to read" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" BadgeCount="42" BadgeLabel="to view" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <div class="badge-wrapper"><span class="toolbar-badge">1</span></div>
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="toolbar-label">messages<span class="visually-hidden">to read</span></span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="toolbar-label">images</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <div class="badge-wrapper"><span class="toolbar-badge">42</span></div>
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="toolbar-label">documents<span class="visually-hidden">to view</span></span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="toolbar-label">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="toolbar-label">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Badges_On_Medium_Toolbar_Correctly()
+    {
+        var component = Render(
+            @<BitToolbar Size="ToolbarSize.Medium">
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" BadgeLabel="There are 42 messages to read" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" BadgeLabel="There are 42 documents to view" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar toolbar-medium">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <div class="badge-wrapper">
+                                <span class="toolbar-badge"></span>
+                                <span class="visually-hidden">There are 42 messages to read</span>
+                            </div>
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="visually-hidden">messages</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="visually-hidden">images</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <div class="badge-wrapper">
+                                <span class="toolbar-badge"></span>
+                                <span class="visually-hidden">There are 42 documents to view</span>
+                            </div>
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="visually-hidden">documents</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="visually-hidden">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="visually-hidden">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Badges_On_Small_Toolbar_Correctly()
+    {
+        var component = Render(
+            @<BitToolbar Size="ToolbarSize.Small">
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" BadgeLabel="There are new messages to read" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" BadgeLabel="There are new documents to view" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar toolbar-small">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <div class="badge-wrapper">
+                                <span class="toolbar-badge"></span>
+                                <span class="visually-hidden">There are new messages to read</span>
+                            </div>
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="visually-hidden">messages</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="visually-hidden">images</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <div class="badge-wrapper">
+                                <span class="toolbar-badge"></span>
+                                <span class="visually-hidden">There are new documents to view</span>
+                            </div>
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="visually-hidden">documents</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="visually-hidden">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="visually-hidden">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Theory]
+    [InlineData(ToolbarSize.Medium, "toolbar-medium")]
+    [InlineData(ToolbarSize.Small, "toolbar-small")]
+    public void BitToolbar_Should_Ignore_BadgeCount_If_Toolbar_Size_Is_Not_Default(ToolbarSize size, string sizeClass)
+    {
+        var component = Render(
+            @<BitToolbar Size="size">
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" BadgeCount="42" BadgeLabel="There are 42 messages to read" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" BadgeCount="42" BadgeLabel="There are 42 documents to view" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar @sizeClass">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <div class="badge-wrapper">
+                                <span class="toolbar-badge"></span>
+                                <span class="visually-hidden">There are 42 messages to read</span>
+                            </div>
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="visually-hidden">messages</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="visually-hidden">images</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <div class="badge-wrapper">
+                                <span class="toolbar-badge"></span>
+                                <span class="visually-hidden">There are 42 documents to view</span>
+                            </div>
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="visually-hidden">documents</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="visually-hidden">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="visually-hidden">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Vertical_Markup_Correctly()
+    {
+        var component = Render(
+            @<BitToolbar Orientation="Orientation.Vertical">
+                <BitToolbarItem Active="true" Label="messages" IconName="@Icons.ItComment" />
+                <BitToolbarItem Label="images" IconName="@Icons.ItCamera" />
+                <BitToolbarItem Label="documents" IconName="@Icons.ItFile" />
+                <BitToolbarItem Label="privacy" IconName="@Icons.ItLocked" />
+                <BitToolbarItem Label="favourites" IconName="@Icons.ItStarOutline" />
+            </BitToolbar>);
+
+        component.MarkupMatches(
+            @<nav class="toolbar toolbar-vertical">
+                <ul>
+                    <li>
+                        <a class="active">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-comment"></use></svg>
+                            <span class="toolbar-label">messages</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-camera"></use></svg>
+                            <span class="toolbar-label">images</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-file"></use></svg>
+                            <span class="toolbar-label">documents</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-locked"></use></svg>
+                            <span class="toolbar-label">privacy</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a class="">
+                            <svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg>
+                            <span class="toolbar-label">favourites</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Not_Render_Href_Attribute_When_Href_Is_Not_Set()
+    {
+        var component = Render(
+            @<BitToolbar>
+                <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" />
+            </BitToolbar>);
+
+        Assert.Null(component.Find("a").GetAttribute("href"));
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Render_Href_Attribute_When_Href_Is_Provided()
+    {
+        var component = Render(
+            @<BitToolbar>
+                <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" Href="/search" />
+            </BitToolbar>);
+
+        Assert.Equal("/search", component.Find("a").GetAttribute("href"));
+    }
+
+    [Fact]
+    public void BitToolbar_Should_Apply_Custom_CssClass()
+    {
+        var component = Render(
+            @<BitToolbar CssClass="my-custom-toolbar">
+                <BitToolbarItem Label="Search" IconName="@Icons.ItSearch" />
+            </BitToolbar>);
+
+        Assert.True(component.Find("nav").ClassList.Contains("my-custom-toolbar"));
+    }
+}