Unsure about using buttons in my nav menu

1

I’m creating a portfolio, and at first I had a normal nav bar that linked to different parts of the page, but now I’m wanting to do something a little different and I’m unsure if, semantically, I’m doing this correctly.

So instead of scrolling to different parts of the page, I’ve changed the <a> tags to buttons, and now when you press a button, the other projects are hidden, and only the corresponding projects are shown. So basically, my question, is this still considered navigation? Is it OK if I leave the buttons inside of the nav tag? The contact section is still going to be a regular link, so I know it will stay, and I’d like to wrap the homeButton in an anchor so that it will show all the projects AND scroll back to the top.

Semantically, and accessibility-wise, what’s the best course of action?

<nav class="navigation">
        <header class="nav_header">
            <h1 class="nav_header-title">Name</h1>
        </header>
        <ul id="nav_menu" class="nav_menu">
            <li class="nav_menu_item">
                <button id='homeButton' class="nav_button" aria-pressed="true">All Projects</button>
                <!-- <a class="nav_link" href="#nav_menu">Home</a> -->
            </li>
            <li class="nav_menu_item">
                <button id='escritosButton' class="nav_button" aria-pressed="false">Escritos Originales</button>
                <!-- <a class="" href="#escritos_originales_section"></a> -->
            </li>
            <li class="nav_menu_item">
                <button id='subtitlesButton' class="nav_button" aria-pressed="false">Subtitulos</button>
                <!-- <a class="nav_link" href="#subtitulos_section">Subtitulos</a> -->
            </li>
            <li class="nav_menu_item">
                <button id='translationsButton' class="nav_button" aria-pressed="false">Traducciones</button>
                <!--<a class="nav_link" href="#traducciones_section">Traducciones</a>-->
            </li>
            <li class="nav_menu_item">
                <!-- <button id='contactButton' class="nav_link" aria-pressed="false">Contacto</button> -->
                <a class="nav_link" href="#profile_section">Contacto</a>
            </li>
        </ul>
    </nav>
1 Like
2

It’s absolutely fine to have button like that. One semantic issue here is that your button are missing type attribute and by default (if no type specified) it’s type="submit", whereas you need type="button"

3

Great to hear, thanks for the reply! As for the type, I had read that when looking at the documentation, but I guess forgot about it, so thanks for the reminder!