Bootstrap 4 NavBar – создание меню

Без навигационного меню не обходится практически ни один сайт, даже на лендингах, как правило, присутствует меню для перемещения по странице. В Bootstrap 4, конечно же, представлен полноценный компонент, отвечающий за меню под названием «NavBar».

Десктопный и мобильный вид горизонтального меню «NavBar»

HTML-код меню, которое отображено на картинке выше:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  	<a class="navbar-brand" href="#">Navbar</a>
  	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
    	<span class="navbar-toggler-icon"></span>
  	</button>

  	<div class="collapse navbar-collapse" id="navbar1">
    	<ul class="navbar-nav mr-auto">
      		<li class="nav-item active">
        		<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      		</li>
		    <li class="nav-item">
		    	<a class="nav-link" href="#">Link</a>
		    </li>
      		<li class="nav-item dropdown">
        		<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        		<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
          			<a class="dropdown-item" href="#">Action</a>
          			<a class="dropdown-item" href="#">Another action</a>
          			<div class="dropdown-divider"></div>
          			<a class="dropdown-item" href="#">Something else here</a>
        		</div>
      		</li>
    	</ul>
    	<form class="form-inline my-2 my-lg-0">
      		<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      		<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
    	</form>
  	</div>
</nav>

Оберткой меню является класс .navbar, который по рекомендациям HTML5 желательно присваивать тегу <nav>, хотя никто не мешает использовать обычный <div> или другой блочный элемент, а если есть необходимость показать, что содержимое <div> является навигацией, то просто добавляем атрибут: role="navigation".

Из коробки меню уже адаптивно, необходимо второму оберточному классу .navbar-expand- лишь указать префикс (sm, md, lg, xl), отвечающий за отображение мобильного вида меню. Подробно о префиксах, адаптации и модульной сетке читайте в статье «Bootstrap 4 – Сетка».

Для установки цветового оформления меню используются еще два дополнительных оберточных класса: .navbar-XXX и .bg-XXX. Для установки цвета вместо XXX к .bg- необходимо прописать любую из восьми цветовых схем бутстрапа (dark, secondary, light, danger, info, primary, success, warning). Класс .navbar- отвечает за цвет текста меню и поддерживает два варианта, чтобы текст был темным нужно использовать .navbar-light, а светлым – .navbar-dark соответственно.

Варианты цветового оформления NavBar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
	<!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
	<!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
	<!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-info">
	<!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	<!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-success">
	<!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-warning">
	<!-- Navbar content -->
</nav>

Если вместо дефолтных цветовых схем фреймворка необходимо использовать другой цвет, то можно просто убрать класс .bg- и задать атрибут style со своим цветом.

Использование собственного цвета для меню Bootstrap 4

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color:#6c1e2e">
	<!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color:#563d7c">
	<!-- Navbar content -->
</nav>

Для «NavBar» не обязателен контейнер, но если необходимо ограничить ширину всего меню, то можно его обернуть в .container.

<div class="container">
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<!-- Navbar content -->
	</nav>
</div>

Если же нужно ограничить ширину только содержимого, а само меню отображать на всю ширину страницы, то .container следует поместить внутри .navbar.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<div class="container">
		<!-- Navbar content -->
	</div>
</nav>

Для позиционирования «NavBar» фреймворк предлагает три дополнительных класса:

  • .fixed-top – фиксирует меню в самом верху страницы;
  • .fixed-bottom – фиксирует меню в самом низу страницы;
  • .sticky-top – фиксирует (приклеивает) меню в верху при скроле страницы.
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
	<!-- Navbar content -->
</nav>

<nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark">
	<!-- Navbar content -->
</nav>

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
	<!-- Navbar content -->
</nav>

Элементы меню Bootstrap 4

Компонент «NavBar» состоит из нескольких подкомпонентов, которые можно добавлять или исключать по мере необходимости.

  • .navbar-brand – название или логотип компании.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	
	<!-- Текстовая ссылка -->
	<a class="navbar-brand" href="#">Navbar</a>

	<!-- Ссылка с логотипом -->
	<a class="navbar-brand" href="#">
		<img src="/images/logo.png" width="50" height="50" alt="...">
	</a>

	<!-- Ссылка с логотипом и текстом-->
	<a class="navbar-brand" href="#">
		<img src="/images/logo.png" class="d-inline-block align-top" width="50" height="50" alt="...">
		Navbar
	</a>

	<!-- Как заголовок без ссылки-->
	<span class="navbar-brand mb-0 h1">Navbar</span>

	<!-- Navbar content -->
</nav>
  • .collapse.navbar-collapse – служебный класс для группировки и скрытия основного содержимого меню, срабатывающий по контрольной точке, которая устанавливается префиксом класса обертки .navbar-expand-{sm|md|lg|xl}.
  • .navbar-toggler – кнопка для открытия содержимого меню (.collapse.navbar-collapse) в мобильном виде. .navbar-toggler и .collapse.navbar-collapse связываются по id.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbar1">
		<!-- Navbar content -->
	</div>

</nav>
  • .navbar-nav – блок основного содержимого навигации, состоящий из ссылок и вложенных выпадающих списков со ссылками. Элементу списка присваивается класс .nav-item и дополнительно .active, если нужно показать, что элемент активен. Ссылке присваивается класс .nav-link, а для выпадающего списка: .dropdown, .dropdown-toggle и .dropdown-item, как показано ниже.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

	<div class="collapse navbar-collapse" id="navbar1">
		<ul class="navbar-nav">
			<li class="nav-item active">
        		<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      		</li>
		    <li class="nav-item">
		    	<a class="nav-link" href="#">Link</a>
		    </li>
      		<li class="nav-item dropdown">
        		<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        		<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
          			<a class="dropdown-item" href="#">Action</a>
          			<a class="dropdown-item" href="#">Another action</a>
          			<div class="dropdown-divider"></div>
          			<a class="dropdown-item" href="#">Something else here</a>
        		</div>
      		</li>
      	</ul>
    </div>

</nav>
  • .form-inline – присваивается форме, находящейся в меню.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

	<form class="form-inline my-2 my-lg-0">
		<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
		<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
	</form>

</nav>
  • .navbar-text – позволяет добавлять текст в меню.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

	<span class="navbar-text">Navbar text with an inline element</span>

</nav>

Меню Bootstrap 4 быстро и легко настраивается под конкретную задачу, можно убирать и добавлять необходимые компоненты, изменять цвет и контрольную точку свертывания под мобильные устройства, а также позиционировать меню, добавив всего один класс.

Все представленные компоненты «NavBar» использованные в статье:

На этом все, если остались вопросы, пишите в комментариях.

Похожие записи: Bootstrap 4 Modal - модальное окно фреймворка Bootstrap 4 Grid: модульная сетка фреймворка Что нового в Bootstrap 4 и в чем отличие от Bootstrap 3? Bootstrap аккордеон: panel и collapse разбор и использование
Добавлено коментариев -  8
  • German 06.03.2018 21:11

    Добрый день!

    Спасибо за вот эту подсказку:

    .collapse.navbar-collapse – служебный класс для группировки и скрытия основного содержимого меню, срабатывающий по контрольной точке, которая устанавливается префиксом класса обертки .navbar-expand-{sm|md|lg|xl}. Реально пригодилось!

    Ответить
    • Евгений 07.03.2018 01:44

      Здравствуйте! Рад, что статья оказалась вам полезной.

      Ответить
  • Марат 31.03.2018 14:19

    Добрый день. Спасибо вам огромное за статью! Все очень понятно изложено. Скажите а как сделать точно такое же меню, только вертикальное?

    Ответить
    • Евгений 02.04.2018 20:05

      Здравствуйте! К сожалению готового компонента вертикального меню у фреймворка нет, если идет речь именно о бутстрапе, то придется «изобретать свой велосипед». Можно воспользоваться сторонним компонентом, поищите решение в сети, по идеи таких компонентов должно быть достаточно.

      Ответить
  • LastQuincy 02.05.2018 00:54

    Большое спасибо за статью*)
    Жаль сразу её не нашёл, сэкономил бы себе половину дня.

    Ответить
    • Евгений 02.05.2018 02:18

      Пожалуйста.

      Ответить
  • Булат 03.07.2018 13:12

    Сколько искал в ютуб, сколько статей прочитал, это самое афигенное объяснение. Большое человеческое спасибо тебе, дружище.

    Ответить
    • Евгений 03.07.2018 14:12

      Пожалуйста. Спасибо вам за добрые слова!

      Ответить

Добавить комментарийОтменить ответ

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности