diff --git a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
index 36287ac1b..873ad4dbb 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Tabs.razor
@@ -20,25 +20,30 @@
     <p>@Localizer["TabsTips4"]</p>
 </Tips>
 
-<p class="mb-3">
-    <b>@Localizer["TabsInfoTitle"]</b>
-</p>
+<p class="code-label">@Localizer["TabsInfoTitle"]</p>
 
 <ul class="ul-demo">
     <li>@((MarkupString)Localizer["TabsInfoItem2"].Value)</li>
     <li>@((MarkupString)Localizer["TabsInfoItem4"].Value)</li>
 </ul>
 
-<p class="mt-3">
-    <b>@Localizer["TabsQATitle"]</b>
-</p>
+<p class="code-label">@Localizer["TabsItemMenuTitle"]</p>
+
+<Pre>services.ConfigureTabItemMenuBindOptions(op =>
+{
+    op.Binders.Add("/settings/menus", new TabItemOptionAttribute() { Text = "Menus", Icon = "fas fa-book-atlas" });
+    op.Binders.Add("/settings/roles", new TabItemOptionAttribute() { Text = "Roles", Icon = "fas fa-user-group" });
+    op.Binders.Add("/settings/users", new TabItemOptionAttribute() { Text = "Users", Icon = "fas fa-users" });
+})</Pre>
+
+<p class="code-label">@Localizer["TabsQATitle"]</p>
 
 <ul class="ul-demo">
     <li>@((MarkupString)Localizer["TabsQA1"].Value)</li>
     <li>@((MarkupString)Localizer["TabsQA2"].Value)</li>
 </ul>
 
-<Pre class="mt-3">[CascadingParameter]
+<Pre>[CascadingParameter]
 [NotNull]
 public Tab? TabSet { get; set; }
 
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json
index d498cc2aa..d3ed8eade 100644
--- a/src/BootstrapBlazor.Server/Locales/en-US.json
+++ b/src/BootstrapBlazor.Server/Locales/en-US.json
@@ -1992,6 +1992,7 @@
     "TabsTips3": "The default behavior of this component is data segmentation,Clicking on the <code>TabItem</code> title does not navigate, and if you need to navigate the address bar, set the <code>ClickTabToNavigation</code> property to <code>true</code>，When you click on the <code>TabItem</code> title, the address bar redirects navigation, mostly for the background management system to be used in conjunction with the <code>Menu</code> components，The actual combat can refer to the <code>multi-label</code> mode in the <a href='layout-page' target='_blank'>background template simulator</a>,  When you have <code>Razor Component</code> in the additional Assemblies, set the <code>AdditionalAssemblies</code> property value correctly so that the route within the label component is resolved correctly, and the relevant documentation <a href='https://docs.microsoft.com/zh-cn/aspnet/core/blazor/fundamentals/routing?WT.mc_id-DT-MVP-5004174-view-aspnetcore-3.1-route-to-components-from-multiple-assemblies' target='_blank'>[Portal]</a>",
     "TabsTips4": "This component adapts to width height, etc., and scroll arrows can appear left and right or up and down when appropriate",
     "TabsInfoTitle": "Set additional information during tab navigation",
+    "TabsItemMenuTitle": "Configure Tab and Menu linked dictionary, this method can automatically obtain tab page properties without separately setting TabItemOption.",
     "TabsInfoItem2": "Tab properties can be set when navigating using the built-in extension method <code>Navigator.NavigateTo(\"provider\", \"url\", \"text\", \"icon\", \"closable\")</code>",
     "TabsInfoItem4": "Setting <code>@attribute [TabItemOption(Text = \"LayoutPage\", Icon = \"fa-solid fa-font-awesome\")]</code> in <code>razor</code> page",
     "TabsQATitle": "Q&A",
diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json
index bd795d35b..9a43a2e3b 100644
--- a/src/BootstrapBlazor.Server/Locales/zh-CN.json
+++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json
@@ -1992,6 +1992,7 @@
     "TabsTips3": "本组件默认行为为数据分割，点击 <code>TabItem</code> 标题时并不会进行导航行为，如果需要进行地址栏导航时请设置 <code>ClickTabToNavigation</code> 属性为 <code>true</code>，此时点击 <code>TabItem</code> 标题时地址栏将会重定向导航，多用于后台管理系统与 <code>Menu</code> 组件进行联动使用，实战可参考 <a href='layout-page' target='_blank'>后台模板模拟器</a> 中的 <code>多标签</code> 模式，如果有 <code>Razor 组件</code> 在额外的程序集中时，请正确设置 <code>AdditionalAssemblies</code> 属性值，以便标签组件内路由正确解析，相关文档 <a href='https://docs.microsoft.com/zh-cn/aspnet/core/blazor/fundamentals/routing?WT.mc_id=DT-MVP-5004174&view=aspnetcore-3.1#route-to-components-from-multiple-assemblies' target='_blank'>[传送门]</a>",
     "TabsTips4": "本组件会根据宽度高度等进行自适应适配，适当的时候可以出现左右或者上下的滚动箭头",
     "TabsInfoTitle": "标签页导航时设置附加信息",
+    "TabsItemMenuTitle": "配置 Tab 与 Menu 联动字典，该方法无需再单独设置 TabItemOption 即可自动获取标签页属性。",
     "TabsInfoItem2": "使用内置扩展方法 <code>Navigator.NavigateTo(\"provider\", \"url\", \"text\", \"icon\", \"closable\")</code> 导航时即可设置标签页属性",
     "TabsInfoItem4": "通过设置 <code>razor</code> 页面标签 <code>@attribute [TabItemOption(Text = \"LayoutPage\", Icon = \"fa-solid fa-font-awesome\")]</code>",
     "TabsQATitle": "常见问题",