Side Navigation component | Vaadin components

Docs
1

This topic is the discussion thread for the Vaadin documentation page Side Navigation component | Vaadin components.

Questions, feedback, and comments are welcome here.

2


Hi,

The SideNav is not functioning in production/jar mode. I have enabled the following option in my build.gradle file:

vaadin {

productionMode = true

}


using : vaadin 21.1.1 springboot 3.0.5

What should I do to resolve this issue?

Thanks.

3

Can SideNavItem be extended with a target argument? It would be nice to be able to have certain menu items to open the page in a new tab...

4

Sounds worth an enhancement ticket: Issues · vaadin/flow-components · GitHub

5

1 week past still no answers ....

6

I would guess you need to use Vaadin 24.1 or later in order to use SideNav.

7

How can i split into three areas? In my mainview there are three grids. So I build a Splitter

new Splitlayout(grid1,grid2). Fine it worked. After that I made a secound Splitter

new Splitlayout(grid2,grid3). Then I added those to my layout: add(some other stuff, splitter,splitter2). BUT: I can only move the second splitter, the first splitter is frozen

8

in your examples you always used Tabs in the AppLayout. What are the Pros that speak for this element instead of Tabs?

9

Tabs aren’t generally recommended for cross-page navigation, as they are not links. Links/anchors serve users of assistive technologies (e.g., screen readers) better.

10

Are you planning to add search functionality to SideNav in case the items grow and are difficult for the users to find the right item.

11

Personally, I don’t think that’s part of the feature set of Side Nav. Rather, it’s something that should be implemented custom (a Text Field above the nav which toggles the visibility of matching items) in an application that can expect to have plenty of items. I wouldn’t bloat the component unnecessarily for all users.

You’re welcome to open a new feature discussion at https://github.com/orgs/vaadin/discussions/categories/feature-ideas

12

I have a 'Action Form" SideNav linked to a view with route 

@Route(value = "actionform", layout = MainLayout.class)
public class ActionView extends VerticalLayout implements HasUrlParameter<Integer>
{
  @Override
  public void setParameter(final BeforeEvent beforeEvent, @OptionalParameter final Integer integer)
  {}
}


From another view, I navigate to this view:

UI.getCurrent().navigate(ActionView.class, 123);


Because of implementing HasUrlParameter, ActionView has 2 paths "/actionform" and "/actionform/<integer>"


Everything works fine, apart from in the sideNav, does not get selected as per the url "https://localhost/actionform/123"


Even though the view has the route as /actionform, it now also has the route with parameter. Is this a bug that the sideNav does not get highlighted in this case?

13

\u0000

I was about to say that it works just fine, but then realised that in my app that I had open, I was still using a list of RouterLinks instead of the SideNav \uD83D\uDE0A

To me this looks like a missing (rather essential) feature. I suggest to add an enhancement issue to <a href="https://github.com/vaadin/flow-components\" target="_blank">GitHub - vaadin/flow-components: Java counterpart of Vaadin Web Components · GitHub

For 24.2.0 (just out today) there was <a href="https://github.com/vaadin/web-components/issues/5826\" target="_blank">a related enhancement added: the more complex "RouteParameters", is now supported. But it looks to me that it expects an exact match, so it might not be what you want, even if you swapped to use RouteParameters instead.

14

Hi how to style the navigation link so that the text wraps? This has no effect:

vaadin-side-nav-item::part(link) {
    white-space: break-spaces;
}


15

Apparently that’s not possible at the moment, as those styles are applied to the internal slot element: https://github.com/vaadin/web-components/blob/main/packages/side-nav/src/vaadin-side-nav-base-styles.js#L63-L70

Sounds like it would be good to create an issue about this: https://github.com/vaadin/web-components/issues/new/choose

16

What are the benefits of using 'Side Navigation' compare to 'AppNav' ? When should each be used?

17

What is AppNav?

18

Sorry, I mean AppLayout

19

Request created here: https://github.com/vaadin/flow-components/issues/5091

Please upvote it with a thumbs-up to increase priority.

20

How to make this sidenavitem responsive, if the name contains 2 or more words and does not fit in one line, then those words that does not fit should start from another line. In my case it just adds ... at the end. I want SideNavItem to display the long text on multiple lines instead of adding ellipsis at the end.