Примеры меню на Bootstrap 5

Меню с логотипом

Пример меню с логотипом.

HTML

<nav class="navbar navbar-expand-lg">
	<div class="container-fluid">
		<div class="container-header__logo">
			<a class="navbar-brand" href="/vseskupki-new_wp/">
				<img class="navbar-brand-logo" src="/vseskupki-new_wp/wp-content/themes/vseskupki/assets/images/logo.png" alt="">
				<p class="navbar-brand-logo-txt">Портал о скупках и<br>ломбардах Москвы</p>
			</a>
			<div class="container-header__button onmobile">
				<a class="container-header__button-link" href="/vseskupki-new_wp/avtomaticheskij-podbor-skupki">Автоматический подбор скупки</a>
			</div>
		</div>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<div id="nav-icon1">
		    <span></span>
		    <span></span>
		    <span></span>
		</div>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav">
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
						Рейтинг
					</a>
					<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
						<li><a class="dropdown-item" href="">Ломбарды</a></li>
						<li><a class="dropdown-item" href="">Скупки</a></li>
						<li><a class="dropdown-item" href="">Ювелирные изделия</a></li>
						<li><a class="dropdown-item" href="">Драгметаллы</a></li>
						<li><a class="dropdown-item" href="">Часы</a></li>
						<li><a class="dropdown-item" href="">Антиквариат</a></li>
						<li><a class="dropdown-item" href="">Недвижимость</a></li>
						<li><a class="dropdown-item" href="">Автомобили</a></li>
					</ul>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Ювелирные изделия</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Драгметаллы</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Часы</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Антиквариат</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Недвижимость</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Автомобили</a>
				</li>
			</ul>
		</div>
	</div>
</nav>

Меню без логотипа

Пример меню без логотипа.

HTML

<nav class="navbar navbar-expand-lg">
	<div class="container-fluid">
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a class="nav-link" href="">Главная</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Услуги</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Техника в аренду</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">О нас</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Перечень объектов</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Отзывы</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Новости</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">Контакты</a>
				</li>
			</ul>
		</div>
	</div>
</nav>