Align Navbar-Dropdown(s) to the right

[manuscrypt]

trafficstars

I am cloning an application that uses bootstrap (3) and it features a Navbar where the last item is a dropdown item, which is pushed all the way to the right.

You already mentioned, that as a workaround, I could model the dropdown with Bootstrap.Dropdown and then use that in customItems, which should be pushed right automagically.

I also tried to apply my meagre css skills, by trying to force float: right on li:last-child, but that had no effect. Absolute positioning did move the li finally, but broke, when the Navbar collapsed.

I hope this describes my use-case sufficiently, and I have no trouble to do the workaround, but it might be nice to have a way to position the Navbar-Items more easily, or maybe just introducing a "spacer" item.

Thank you for the wonderful library! Let me know, if I can provide anything else.

[manuscrypt]

Oh, another possible solution would be to have two Navbars and arrange them in a Grid. That's my preferred one, currently. What I am asking for, is probably not even part of the bootstrap standard.

[aaronwhite]

Running into this now as well. We're voracious & happy consumers of this great library (thanks @rundis!) Will try dropdown workaround

[rundis]

Cheers. Didn't have time to look at this with my push for a 4.0.0 release. You can do a crazy amount of stuff with nav and navbars in bootstrap. It's a bit hard to come up with an API that is easy to use and still super-flexible to handle use cases like this. I'll give it some though when I have some time, alternatively someone comes up with some design ideas that aids this and potentially other common exceptions to the stuff currently supported.

[branjwong]

Running into this as well!

[Munksgaard]

I would like to be able to specify whether my Navbar.items are aligned left or right, but I guess that is sort of related?

[tad-lispy]

Hi! Thanks for this package. We are experimenting with converting Richard Feldman's implementation of the Real World SPA to use Elm Bootstrap. One immediate problem is the Navbar.

In the templates the navbar doesn't use collapse wrapper (it's basically non-responsive) and the stylesheet makes some assumptions about it. Simply replacing their navbar with one created using Bootstrap.Navbar results in all items being always hidden. We tried to use the standard bootstrap stylesheet and then adjusting it. That's how we ran into this issue - it seems impossible to align items right without doing some hacks.

Since you have asked for design ideas, let me drop my two cents. IMO having two types (Navbar.Item and Navbar.CustomItem) where group of Item is always on the left and CustomItem always on the right is mixing concerns. Looking at the docs from Bootstrap website I see that they have different groups inside a navbar (specifically Brand, Nav, Form, Text) with different accepted children and default behavior. Each group can take bootstrap classes (like ml-auto to push it to the right). Note that there are examples of navbar-text without brand and such, so the configuration of groups is pretty arbitrary.

Maybe we should try to encode it in the types? The Navbar would take a list of Group where group could be a union type:

type Group
    = Brand (List (Html.Attribute msg)) (List (Html msg))
    | Nav (List (Html.Attribute msg)) (List NavItem)
    | Form (List (Html.Attribute msg)) (List (Html msg))
    | Text (List (Html.Attribute msg)) (List (Html msg))

While rendering, each group would have some default attributes (e.g. Nav grows to take all the space) but attributes provided as first argument to the constructor would take precedence. Perhaps Form and Text could be merged into single Custom constructor.

Benefits:

• Greater flexibility
• Decoupling of type from layout
• Semantic output (with ARIA attributes etc.)

Please let me know what you think. I can't promise but if we have time we will try to implement it in our app, see how it goes and if you like it prepare a PR.

Once again, thanks for your efforts here.

[donotnoot]

any updates on this? I'd really like to align some items right