Ask A Question


You’re not receiving notifications from this thread.

Responsive Navigation with Turbo Discussion

Chris! The video is se to private!


Hey Nick, that was a scheduling mistake on our end. That video won't be out until August. Sorry for the confusion!


Hey Collin, no problem at all! Thanks for clarifying. Looking forward to watching it!


This is a fantastic approach and extremely clean. Thanks for sharing this!


Use Turbo's

element to contain your navigation links. This clearly identifies the navigation content.


The Law of Demeter is a design guideline that aims to reduce coupling between objects by limiting how objects interact with each other. It states that a method of an object should only call methods:

On itself
On its parameters
On objects it created
On component objects


One problem is if you are using this and you go to a show view; the request.path would now include the ID of the record you are looking at. While you are not at the index view that the navigation points to anymore, the dropdown will default to the first element again. So it might be a good idea to use include_blank: true or a prompt: "Navigation" to avoid issues trying to access that first navigation option.


For Bootstrap, which might be outdated..:

<%= select_tag nil, options_for_select(items, request.path), class: "d-md-none", onchange: "Turbo.visit(this.selectedOptions[0].value)" %>

<div class="d-none d-md-block">
  <ul class="nav">
    <% items.each do |text, path| %>
      <li class="nav-item"><%= link_to text, path, class: "nav-link" %></li>
    <% end %>

Bonus, add action: "replace to Turbo.visit() so a new screen isn't pushed in Turbo Native!


Great video. I would prefer if rails gave us the UI separation bore "rails style", like, I don't know, two have a view .html.erb and a view .m.html.erb and implemented both options in a separate file. Does it make sense?

For a more complex view, it could be such a hard thing to maintain multiple view logic complexity for both UIs.


that's great

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 83,603+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.