Linking pages in Nav bar

Phoenix Forum Questions / Help
, , ,
1

I would like to know how can I link(route) to another page from my navbar?

The file below lives in my navingation.html.heex file (my GitHub)

<a href="/delish_foods" class="block mt-4 lg:inline-block lg:mt-0 text-grey-darkest mr-4 no-underline hover:underline">
        Recipes
      </a>

The above is not correct, because when I click the button nothing happens what is the process to get my routes linked to a button on the navbar?

2

You need to learn about the link helper…

https://hexdocs.pm/phoenix_html/Phoenix.HTML.Link.html

There is already an example in the root layout.

You can get all your routes with

mix phx.routes

Try to get some examples, it’s not complicate, but knowing REST is helpful.

3

Hey,

Okay I cleaned it up a little by following the guide, thank you for that. So now it looks like this

<%= link("Recipes", to: "/delish_foods") %>

Looks a lot more cleaner and readable. But it still doesn’t work. I did notice the terminal execture this everytime I click the link

  Parameters: %{}
  Pipelines: [:browser]
[debug] QUERY OK source="delish_foods" db=1.3ms idle=1251.5ms
SELECT d0."id", d0."date", d0."ingredients", d0."summary", d0."title", d0."inserted_at", d0."updated_at" FROM "delish_foods" AS d0 []
4

Yes!! I figures it out, the CSS was throwing off the routes, but thanks for the hexdocs that helped me out a lot.

5

You should not write the url yourself, but use Route.Helpers, as Routes…

https://hexdocs.pm/phoenix/routing.html

2 Likes