diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor
index f2a0049e18..33a1040784 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor
@@ -3,68 +3,83 @@
 @typeparam TItem
 
 @{
-    var isToggled = !_isPanelOpen && _isMenuToggled;
+    var isToggled = !_isPanelOpen && _isPanelToggled;
 }
 
-<div class="bit-npn @($"{(_isPanelOpen ? "" : "closed")} {(isToggled ? "6rem" : "14rem")}")">
+<div @ref="RootElement" @attributes="HtmlAttributes"
+     id="@_Id"
+     role="dialog"
+     style="@StyleBuilder.Value"
+     class="@ClassBuilder.Value @($"{(_isPanelOpen ? "" : "closed")} {(isToggled ? "toggled" : "")}")"
+     dir="@Dir?.ToString().ToLower()">
+
     @if (_isPanelOpen)
     {
         <div class="bit-npn-ovl" @onclick=CloseMenu></div>
     }
-    <div Class="panel">
-        <BitStack HorizontalAlign="@(isToggled ? BitAlignment.Center : BitAlignment.Start)" Grows>
-            <BitStack Horizontal AutoHeight Alignment="BitAlignment.Center">
-                <BitImage Src="_content/Boilerplate.Client.Core/images/bit-logo.svg"
-                          Visibility="@(isToggled ? BitVisibility.Collapsed : BitVisibility.Visible)" />
+
+    <div class="bit-npn-cnt" style="@( $"justify-content:{(isToggled ? "":"")}")">
+        @if (HeaderTemplate is not null)
+        {
+            @HeaderTemplate
+        }
+        else
+        {
+            <div class="bit-npn-hdr">
+                @if (ImageUrl.HasValue())
+                {
+                    <img src="@ImageUrl" class="bit-npn-img" style="@(isToggled ? "display:none" : "")" />
+                }
                 <BitSpacer Visibility="@(isToggled ? BitVisibility.Collapsed : BitVisibility.Visible)" />
                 <BitButton IconOnly FixedColor
-                           Class="toggle-btn"
+                           Class="bit-npn-tbn"
                            Size="BitSize.Large"
                            OnClick="ToggleNavPanel"
                            Variant="BitVariant.Text"
                            IconName="ColumnRightTwoThirds"
                            Color="BitColor.TertiaryBackground" />
-            </BitStack>
+            </div>
+        }
 
-            <BitSearchBox @ref="_searchBoxRef"
-                          Underlined Immediate DebounceTime="500"
-                          OnChange="SearchNavItems"
-                          Style="@(isToggled ? "display:none" : "")"
-                          Styles="@(new() { Root="width:100%", InputContainer="width:100%" })" />
+        <BitSearchBox @ref="_searchBoxRef"
+                      Underlined Immediate DebounceTime="500"
+                      OnChange="SearchNavItems"
+                      Style="@(isToggled ? "display:none" : "")"
+                      Styles="@(new() { Root="width:100%", InputContainer="width:100%" })" />
 
-            @if (isToggled)
-            {
-                <BitButton IconOnly
-                           FixedColor
-                           IconName="Search"
-                           Class="toggle-btn"
-                           Size="BitSize.Large"
-                           OnClick="ToggleForSearch"
-                           Variant="BitVariant.Text"
-                           Color="BitColor.TertiaryBackground" />
-            }
+        @if (isToggled)
+        {
+            <BitButton IconOnly
+                       FixedColor
+                       IconName="Search"
+                       Class="toggle-btn"
+                       Size="BitSize.Large"
+                       OnClick="ToggleForSearch"
+                       Variant="BitVariant.Text"
+                       Color="BitColor.TertiaryBackground" />
+        }
 
-            @if (_filteredNavItems.Count == 0)
-            {
-                if (isToggled is false)
-                {
-                    <BitText>Nothing found!</BitText>
-                }
-            }
-            else
+        @if (_filteredNavItems.Any() is false)
+        {
+            if (isToggled is false)
             {
-                <BitNav FullWidth
-                        IconOnly="isToggled"
-                        Items="_filteredNavItems"
-                        Accent="BitColor.SecondaryBackground"
-                        DefaultSelectedItem="_filteredNavItems[0]"
-                        OnItemClick="(BitNavItem item) => HandleNavItemClick(item)"
-                        Styles="@(new() { SelectedItemContainer = "background-color: var(--bit-clr-bg-sec-active)" })" />
+                <BitText>Nothing found!</BitText>
             }
+        }
+        else
+        {
+            <BitNav @ref=_bitNavRef
+                    FullWidth
+                    IconOnly="isToggled"
+                    Items="_filteredNavItems"
+                    Accent="BitColor.SecondaryBackground"
+                    DefaultSelectedItem="_filteredNavItems[0]"
+                    OnItemClick="(TItem item) => HandleNavItemClick(item)"
+                    Styles="@(new() { SelectedItemContainer = "background-color: var(--bit-clr-bg-sec-active)" })" />
+        }
 
-            <BitSpacer />
+        <BitSpacer />
 
-            @* <Footer></Footer> *@
-        </BitStack>
+        @* <Footer></Footer> *@
     </div>
 </div>
\ No newline at end of file
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs
index a64d46d835..ce4fdca2b6 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor.cs
@@ -1,21 +1,28 @@
-using Microsoft.Extensions.Options;
-
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 public partial class BitNavPanel<TItem> : BitComponentBase, IDisposable where TItem : class
 {
     private bool _disposed;
     private bool _isPanelOpen;
-    private bool _isMenuToggled;
-    private List<BitNavItem> allNavItems = [];
+    private bool _isPanelToggled;
+    private BitNav<TItem> _bitNavRef = default!;
+    private IList<TItem> _filteredNavItems = [];
     private BitSearchBox _searchBoxRef = default!;
-    private List<BitNavItem> _flatNavItemList = [];
-    private List<BitNavItem> _filteredNavItems = [];
+    private IEnumerable<TItem> _flatNavItemList = [];
+
 
+    /// <summary>
+    /// The custom template to render as the header of the nav panel.
+    /// </summary>
+    [Parameter] public RenderFragment? HeaderTemplate { get; set; }
 
+    /// <summary>
+    /// The custom template to render as the header of the nav panel.
+    /// </summary>
+    [Parameter] public string? ImageUrl { get; set; }
 
     /// <summary>
-    /// A collection of item to display in the navigation bar.
+    /// A collection of items to display in the nav panel.
     /// </summary>
     [Parameter]
     [CallOnSet(nameof(OnSetItems))]
@@ -23,27 +30,18 @@ public partial class BitNavPanel<TItem> : BitComponentBase, IDisposable where TI
 
 
 
-    protected override string RootElementClass => "bit-nav";
+    protected override string RootElementClass => "bit-npn";
 
     protected override async Task OnInitializedAsync()
     {
-        //CreateNavItems();
-        _flatNavItemList = Flatten(allNavItems).ToList().FindAll(link => !string.IsNullOrEmpty(link.Url));
-
         SearchNavItems(null);
-
-        //unsubOpenNavPanel = PubSubService.Subscribe(ClientPubSubMessages.OPEN_NAV_PANEL, async _ =>
-        //{
-        //    isMenuOpen = true;
-        //    StateHasChanged();
-        //});
     }
 
-    private async Task HandleNavItemClick(BitNavItem item)
+    private async Task HandleNavItemClick(TItem item)
     {
-        if (string.IsNullOrEmpty(item.Url)) return;
+        if (string.IsNullOrEmpty(_bitNavRef.GetUrl(item))) return;
 
-        _filteredNavItems = allNavItems;
+        _filteredNavItems = Items;
 
         await CloseMenu();
     }
@@ -55,8 +53,9 @@ private async Task CloseMenu()
 
     private async Task ToggleNavPanel()
     {
-        _isMenuToggled = !_isMenuToggled;
-        if (_isMenuToggled)
+        _isPanelToggled = !_isPanelToggled;
+
+        if (_isPanelToggled)
         {
             SearchNavItems(null);
         }
@@ -64,40 +63,32 @@ private async Task ToggleNavPanel()
 
     private async Task ToggleForSearch()
     {
-        _isMenuToggled = false;
+        _isPanelToggled = false;
         await Task.Delay(1);
         await _searchBoxRef.FocusAsync();
     }
 
     private void SearchNavItems(string? searchText)
     {
-        _filteredNavItems = allNavItems;
-        if (searchText is null) return;
+        _filteredNavItems = Items;
+        if (searchText.HasNoValue()) return;
 
-        _filteredNavItems = allNavItems;
-        if (string.IsNullOrEmpty(searchText)) return;
+        var mainItems = _flatNavItemList.Where(item => searchText!.Split(' ')
+                                                                  .Where(t => string.IsNullOrEmpty(t) is false)
+                                                                  .Any(t => $"{_bitNavRef.GetText(item)} {_bitNavRef.GetDescription(item)}"
+                                                                             .Contains(t, StringComparison.InvariantCultureIgnoreCase)));
 
-        var mainItems = _flatNavItemList
-                            .FindAll(item => searchText.Split(' ')
-                                                 .Where(t => string.IsNullOrEmpty(t) is false)
-                                                 .Any(t => $"{item.Text} {item.Description}".Contains(t, StringComparison.InvariantCultureIgnoreCase)));
-
-        var subItems = _flatNavItemList
-                            .FindAll(item => searchText.Split(' ')
-                                                 .Where(t => string.IsNullOrEmpty(t) is false)
-                                                 .Any(t => item.Data?.ToString()?.Contains(t, StringComparison.InvariantCultureIgnoreCase) ?? false));
+        var subItems = _flatNavItemList.Where(item => searchText!.Split(' ')
+                                                                 .Where(t => string.IsNullOrEmpty(t) is false)
+                                                                 .Any(t => _bitNavRef.GetData(item)?.ToString()?
+                                                                                     .Contains(t, StringComparison.InvariantCultureIgnoreCase) ?? false));
 
         _filteredNavItems = [.. mainItems, .. subItems];
     }
 
-    private static IEnumerable<BitNavItem> Flatten(IEnumerable<BitNavItem> e) => e.SelectMany(c => Flatten(c.ChildItems)).Concat(e);
-
     private void OnSetItems()
     {
-        if (ChildContent is not null || Options is not null || Items == _oldItems) return;
-
-        _items = Items?.ToList() ?? [];
-        _oldItems = Items;
+        _flatNavItemList = Items.Flatten(_bitNavRef.GetChildItems).Where(item => _bitNavRef.GetUrl(item).HasValue());
     }
 
 
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss
index 5df77e85e8..bf4f52f9b1 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss
@@ -1,11 +1,19 @@
+@import "../../../Bit.BlazorUI/Styles/functions.scss";
+@import "../../../Bit.BlazorUI/Styles/media-queries.scss";
+
 .bit-npn {
     top: 0;
     padding: 1rem;
     position: sticky;
+    min-width: 14rem;
+    max-width: 14rem;
     overflow: hidden auto;
-    height: var(--app-height);
-    min-width: var(--nav-menu-width);
-    max-width: var(--nav-menu-width);
+    height: var(--bit-env-height-avl);
+
+    &.toggled {
+        min-width: 6rem;
+        max-width: 6rem;
+    }
 
     &::-webkit-scrollbar {
         width: 0;
@@ -16,8 +24,8 @@
         padding: 0;
         position: fixed;
         height: unset !important;
-        top: var(--app-inset-top);
-        bottom: var(--app-inset-bottom);
+        top: var(--bit-env-inset-top);
+        bottom: var(--bit-env-inset-bottom);
 
         &.closed {
             display: none;
@@ -25,13 +33,11 @@
     }
 }
 
-.bit-macos {
-    section {
-        height: -webkit-fill-available;
+.bit-macos .bit-npn {
+    height: -webkit-fill-available;
 
-        ::deep .panel {
-            height: -webkit-fill-available;
-        }
+    .bit-npn-cnt {
+        height: -webkit-fill-available;
     }
 }
 
@@ -48,28 +54,36 @@
     }
 }
 
-::deep {
-    .panel {
-        width: auto;
-        display: flex;
-        padding: 0.5rem;
-        min-height: 100%;
-        height: fit-content;
-        flex-direction: column;
-        background-color: $bit-color-background-secondary;
+.bit-npn-cnt {
+    width: auto;
+    display: flex;
+    padding: 0.5rem;
+    min-height: 100%;
+    height: fit-content;
+    flex-direction: column;
+    background-color: $clr-bg-sec;
 
-        @include lt-md {
-            padding: 1rem;
-        }
+    @include lt-md {
+        padding: 1rem;
     }
+}
 
-    .toggle-btn {
-        @include lt-md {
-            display: none;
-        }
-    }
+.bit-npn-hdr {
+    display: flex;
+    align-items: center;
+}
+
+.bit-npn-img {
+    max-width: 38px;
+    max-height: 38px;
+}
 
-    a {
-        text-decoration: none;
+.bit-npn-spc {
+    flex-grow: 1;
+}
+
+.bit-npn-tbn {
+    @include lt-md {
+        display: none;
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanelClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanelClassStyles.cs
new file mode 100644
index 0000000000..6c87d60979
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanelClassStyles.cs
@@ -0,0 +1,9 @@
+namespace Bit.BlazorUI;
+
+public class BitNavPanelClassStyles
+{
+    /// <summary>
+    /// Custom CSS classes/styles for the overlay of the BitNavPanel.
+    /// </summary>
+    public string? Overlay { get; set; }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/LinqExtensions.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/LinqExtensions.cs
new file mode 100644
index 0000000000..4c953a5a96
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Extensions/LinqExtensions.cs
@@ -0,0 +1,49 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// https://www.codeproject.com/tips/375967/flatten-a-hierarchical-collection-of-objects-with
+/// </summary>
+public static class LinqExtensions
+{
+    /// <summary>
+    ///   This method extends the LINQ methods to flatten a collection of 
+    ///   items that have a property of children of the same type.
+    /// </summary>
+    /// <typeparam name = "T">Item type.</typeparam>
+    /// <param name = "source">Source collection.</param>
+    /// <param name = "childPropertySelector">
+    ///   Child property selector delegate of each item. 
+    ///   IEnumerable'T' childPropertySelector(T itemBeingFlattened)
+    /// </param>
+    /// <returns>Returns a one level list of elements of type T.</returns>
+    public static IEnumerable<T> Flatten<T>(this IEnumerable<T> source,
+                                                 Func<T, IEnumerable<T>> childPropertySelector)
+    {
+        return source
+            .Flatten((itemBeingFlattened, objectsBeingFlattened) =>
+                     childPropertySelector(itemBeingFlattened));
+    }
+
+    /// <summary>
+    ///   This method extends the LINQ methods to flatten a collection of 
+    ///   items that have a property of children of the same type.
+    /// </summary>
+    /// <typeparam name = "T">Item type.</typeparam>
+    /// <param name = "source">Source collection.</param>
+    /// <param name = "childPropertySelector">
+    ///   Child property selector delegate of each item. 
+    ///   IEnumerable'T' childPropertySelector
+    ///   (T itemBeingFlattened, IEnumerable'T' objectsBeingFlattened)
+    /// </param>
+    /// <returns>Returns a one level list of elements of type T.</returns>
+    public static IEnumerable<T> Flatten<T>(this IEnumerable<T> source,
+                                                 Func<T, IEnumerable<T>, IEnumerable<T>> childPropertySelector)
+    {
+        return source
+            .Concat(source
+                        .Where(item => childPropertySelector(item, source) != null)
+                        .SelectMany(itemBeingFlattened =>
+                                    childPropertySelector(itemBeingFlattened, source)
+                                        .Flatten(childPropertySelector)));
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
index 70ca783961..7cc1a9bfa6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Nav/BitNav.razor.cs
@@ -94,7 +94,7 @@ public partial class BitNav<TItem> : BitComponentBase, IDisposable where TItem :
     [Parameter] public int IndentReversedPadding { get; set; } = 4;
 
     /// <summary>
-    /// A collection of item to display in the navigation bar.
+    /// A collection of items to display in the BitNav component.
     /// </summary>
     [Parameter]
     [CallOnSet(nameof(OnSetParameters))]
@@ -336,6 +336,28 @@ internal List<TItem> GetChildItems(TItem item)
         return item.GetValueFromProperty<string?>(NameSelectors.CollapseAriaLabel.Name);
     }
 
+    internal object? GetData(TItem item)
+    {
+        if (item is BitNavItem navItem)
+        {
+            return navItem.Data;
+        }
+
+        if (item is BitNavOption navOption)
+        {
+            return navOption.Data;
+        }
+
+        if (NameSelectors is null) return null;
+
+        if (NameSelectors.Data.Selector is not null)
+        {
+            return NameSelectors.Data.Selector!(item);
+        }
+
+        return item.GetValueFromProperty<string?>(NameSelectors.Data.Name);
+    }
+
     internal string? GetDescription(TItem item)
     {
         if (item is BitNavItem navItem)
diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/StringExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/StringExtensions.cs
index 4fb33a2584..8dcc5ff61c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Extensions/StringExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Extensions/StringExtensions.cs
@@ -1,4 +1,5 @@
-namespace Bit.BlazorUI;
+#nullable enable
+namespace Bit.BlazorUI;
 
 internal static class StringExtensions
 {