diff --git a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LanguageSwitch.razor b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LanguageSwitch.razor
index 2f31e57cf7..6b93618f44 100644
--- a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LanguageSwitch.razor
+++ b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LanguageSwitch.razor
@@ -5,17 +5,17 @@
 @inject IJSRuntime JsRuntime
 @if (_otherLanguages != null && _otherLanguages.Any())
 {
-    <Dropdown>
-        <DropdownToggle Color="Color.None">
+    <BarDropdown>
+        <BarDropdownToggle>
             @_currentLanguage.DisplayName
-        </DropdownToggle>
-        <DropdownMenu>
+        </BarDropdownToggle>
+        <BarDropdownMenu RightAligned="true">
             @foreach (var language in _otherLanguages)
             {
-                <DropdownItem Clicked="() => ChangeLanguageAsync(language)">@language.DisplayName</DropdownItem>
+                <BarDropdownItem Clicked="() => ChangeLanguageAsync(language)">@language.DisplayName</BarDropdownItem>
             }
-        </DropdownMenu>
-    </Dropdown>
+        </BarDropdownMenu>
+    </BarDropdown>
 }
 @code {
     private IReadOnlyList<LanguageInfo> _otherLanguages;
diff --git a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LoginDisplay.razor b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LoginDisplay.razor
index e4767cc031..bdd03d89a2 100644
--- a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LoginDisplay.razor
+++ b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/LoginDisplay.razor
@@ -7,8 +7,8 @@
 @inject SignOutSessionStateManager SignOutManager
 <AuthorizeView>
     <Authorized>
-        <Dropdown>
-            <DropdownToggle Color="Color.None">
+        <BarDropdown>
+            <BarDropdownToggle>
                 @if (CurrentTenant.Name != null)
                 {
                     <span><i>@CurrentTenant.Name</i>\@CurrentUser.UserName</span>
@@ -17,25 +17,25 @@
                 {
                     <span>@CurrentUser.UserName</span>
                 }
-            </DropdownToggle>
-            <DropdownMenu>
+            </BarDropdownToggle>
+            <BarDropdownMenu RightAligned="true">
                 @if (Menu != null)
                 {
                     @foreach (var menuItem in Menu.Items)
                     {
-                        <DropdownItem Clicked="@(() => NavigateTo(menuItem.Url))">@menuItem.DisplayName</DropdownItem>
+                        <BarDropdownItem Clicked="@(() => NavigateTo(menuItem.Url))">@menuItem.DisplayName</BarDropdownItem>
                     }
                 }
-                <a class="dropdown-item" href="@ServerAccountUrl">
+                <BarDropdownItem To="@ServerAccountUrl">
                     @UiLocalizer["ManageYourAccount"]
-                </a>
+                </BarDropdownItem>
                 <DropdownDivider />
-                <DropdownItem Clicked="BeginSignOut">Logout</DropdownItem>
-            </DropdownMenu>
-        </Dropdown>
+                <BarDropdownItem Clicked="BeginSignOut">Logout</BarDropdownItem>
+            </BarDropdownMenu>
+        </BarDropdown>
     </Authorized>
     <NotAuthorized>
-        <a class="nav-link" href="authentication/login">Log in</a>
+        <BarLink To="authentication/login">Log in</BarLink>
     </NotAuthorized>
 </AuthorizeView>
 @code{
diff --git a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/NavToolbar.razor b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/NavToolbar.razor
index 5eea07ea8f..ede8a54415 100644
--- a/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/NavToolbar.razor
+++ b/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/NavToolbar.razor
@@ -1,8 +1,8 @@
 <ul class="navbar-nav">
     @foreach (var render in ToolbarItemRenders)
     {
-        <li class="nav-item">
+        <BarItem>
             @render
-        </li>
+        </BarItem>
     }
 </ul>