Zgodnie z dokumentacją dotyczącą menu Navbar z biblioteki Bootstrap 4, w celu stworzenia menu należy zdefiniować listę A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens). To add links inside the navbar, use a <ul> element with class="navbar-nav". Then add <li> elements with a .nav-item class followed by a <a> element with a .nav-link class... Use any of the .bg-color classes to change the background color of the navbar (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light) Tip: Add a white text color to all links in the navbar with the .navbar-dark class, or use the .navbar-light class to add a black text color. Źródło: https://www.w3schools.com/bootstrap4

Wyjaśnienie

Wybrałeś dokładnie taki kod, jaki zaleca oficjalna dokumentacja Bootstrapa 4. Użycie <ul class="navbar-nav"> … </ul> jest podstawą do tworzenia nawigacji w tym frameworku. Cała magia polega na tym, że Bootstrap styluje właśnie elementy listy nieuporządkowanej (ul) z klasą "navbar-nav". To pozwala prawidłowo wyświetlić menu poziomo, z zachowaniem responsywności i spójności z resztą interfejsu. Wewnątrz każdej listy dodaje się <li class="nav-item">, a w nich <a class="nav-link"> z linkami – wtedy całość zachowuje się zgodnie z założeniami Bootstrapa. W praktyce widać to na prawie każdej stronie korzystającej z tego frameworka – niezależnie czy robisz prostą wizytówkę, czy rozbudowaną aplikację webową. Takie podejście zapewnia nie tylko poprawne style, ale też dobre wsparcie dla dostępności (a11y), bo listy są dla czytników ekranu czytelniejsze niż np. <div>. Moim zdaniem, trzymanie się tej struktury jest kluczowe, jeśli chcesz, żeby twoje menu działało dobrze na różnych przeglądarkach i urządzeniach. Z moich doświadczeń wynika, że próby modyfikowania tej struktury kończą się często problemami ze stylami, a nawet łamaniem responsywności. Lepiej nie kombinować i stosować to, co już sprawdzone – oszczędza to mnóstwo nerwów przy późniejszym rozwijaniu projektu.