Open Closed

Request for Assistance in Customizing Bottom Navigation Bar Items in Mobile View for Blazor Web App #8142


User avatar
0
dhill created
  • UI Type: Blazor Server
  • Database System: EF Core (SQL Server)
  • Exception message and full stack trace:
  • Steps to reproduce the issue

Dear ABP Support Team, I hope this message finds you well. I am currently working on a Blazor WebAssembly application using the ABP framework and have encountered challenges while attempting to customize the bottom navigation bar for the mobile view.

Issue Description In our application, we need to modify the items displayed in the bottom navigation bar specifically for mobile users. The default menu items provided by the ABP framework do not align with our application’s requirements, and we wish to tailor the navigation options to better suit our users’ needs.

Current Approach I have attempted the following steps to customize the bottom navigation bar:

Modifying the Navigation Items: I tried to configure the mobile navigation menu using the following code snippet:

Configure<LeptonXThemeBlazorOptions>(options => { options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == SafetyPlusWebMenus.Home || x.MenuItem.Name == SafetyPlusWebMenus.Employees); });

However, the changes did not reflect as expected in the mobile view.

Request for Guidance Given the challenges I have faced, I would greatly appreciate your assistance in providing detailed guidance on how to accomplish the following: Steps to Access and Customize the Bottom Navigation Bar: Clear, step-by-step instructions on how to locate the relevant components and modify the bottom navigation bar for mobile view. Best Practices for Customization: Recommendations on best practices for ensuring that the navigation items are properly displayed and functional within the mobile context. Dynamic Menu Items: If possible, please advise on how to implement dynamic menu items based on user roles or other criteria, as this is a requirement for our application. Troubleshooting Tips: Any additional troubleshooting tips or common pitfalls to avoid while attempting these customizations. I appreciate your time and support in helping us customize the bottom navigation bar to meet our specific requirements. Please let me know if you need any further details or clarification on our setup.


1 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Can you share some screenshots to show the component you want to override?

    What is the UI type of your app?

    • Blazor Server
    • Blazor WASM
    • Blazor WebApp(hybrid server and wasm)

    Thanks.

Made with ❤️ on ABP v9.1.0-preview. Updated on October 22, 2024, 09:35