Если вы хотите придерживаться статического HTML - Нет . HTML не может содержать логику, которая решает, какие элементы навигации появляются в выпадающем списке, затем на панели или в обоих без повторения кода.
Со сложным CSS с помощью запросов @media (загрузочные классы ".hidden -...") - Сортировка .
С JS - Да . Вы можете избежать повторения кода, храня ссылки в некоторой форме конфигурации, которая определяет, появляется ли навигационная ссылка в панели навигации, в раскрывающемся меню или в обоих, например:
navItems = [{ text: "About", href: "/about", inNavBar: false, inNavDropdown: true},...]
Затем можно выполнить итерацию по этому массиву и динамически создать два вида навигации
Быстрый JSX, например, будет:
const navItems = [...] // your nav items config array
const navBar = () => (
<React.Fragment>
<div class="navbar-nav ...">
{navItems
.filter(({ inNavBar }) => inNavBar)
.forEach(({ text, href }) => (
<a class="nav-item nav-link href={href}>{text}</a>)}
</div>
</React.Fragment>
)
</div>
const navDropdown = () => (
// same as navBar() but will filter for inNavDropDown == true instead of inNavBar
)
Ванильная реализация JS будет содержать ту же логику, но некоторую многословность и разницу в создании элементов.