Top Nav Questions

Search Best Practices - Search Front-End
1

Hi Team!

I have two changes that I am looking to make on the frontend that I have questions about:

  1. Is there any way we can limit the number of verticals that show up on the nav item bar? My client wants to limit it to 6 nav item (Universal, and 5 verticals), with the rest under more.
  2. How can I update the kebab icon next to “More” on the Navigation bar to a “+” icon instead? I know I will need an icon file from the client, but where in the code will I update the icon? Additionally, in this same location can I update this to having the icon after? I.e. “More +”

Thanks!
Davis

2

Hey Davis,

For your second question, I’d suggesting taking a look at the SDK documentation for the Navigation Component. Particularly, overflowLabel and overflowIcon should be helpful here.

In terms of putting the icon after the label, you can use CSS for this. If the parent container has display: flex; set, you can add order to the two children which are the label and icon in this case. If you put order: 2 on the icon, it will appear after the label.

I’m not entirely sure about your first question. To my knowledge, there is nothing in the Navigation API that controls this. I think in general it would be tricky to explicitly set a number of verticals to display because the available space for the navigation as a whole will depend on the length of all the vertical names and the particular screen the experience is being viewed on at any given time.

Best,
DJ

3

DJ,

Thanks for the update! I was pretty sure there was nothing we could do for my first question, but thought I would check anyway.

I will test out what you mentioned for the second question this afternoon, and follow-up if I have any questions!

Best,
Davis