Навігація: найкращі практики
Дотримуйтесь цих найкращих практик, щоб ваші інтерфейси були зручними, практичними та доступними.
Навігація – один із ключових елементів зручного веб-дизайну.
Вона допомагає нам без перешкод переміщатися сайтом. Навігаційна панель або меню – це спосіб впорядкованого розміщення посилань на інші (зазвичай внутрішні) сторінки. Цей елемент може бути прихований або, навпаки, розташовуватися на очах, дозволяючи відвідувачам переходити до тих розділів, які їм найцікавіші.
Якщо ви спроектували навігацію невдало, то незалежно від того, наскільки гарний ваш контент, відвідувачам сайту буде важко в ньому орієнтуватися. Отже, якщо ви веб-дизайнер-початківець або просто шукаєте кращі методи оформлення навігаційної панелі, ви прийшли за адресою. У статті ми поділимося порадами, дотримуючись яких ви зможете створювати зручну та ефективну навігацію.
Види навігації
Найважливіше у дизайні панелі навігації – функціональність. Користувачам мають бути доступні вхід до системи, інструменти пошуку та ключовий контент.
Різні види меню можуть застосовуватися в інтерфейсах по-різному залежно від їхнього дизайну та розташування.
1. Стандартна горизонтальна навігаційна панель
Найбільш поширений вид меню – горизонтальна панель навігації. Вона включає список важливих сторінок або розділів сайту, які можуть бути вкладені одна в одну. Назви пунктів меню зазвичай складаються з одного-двох слів, які коротко описують розділ.
У прикладі нижче ми бачимо шість пунктів меню, включаючи логотип "Hurry", клікнувши яким відвідувачі можуть повернутися на головну сторінку з внутрішніх сторінок.
Горизонтальні меню часто бувають "липкими" - вони фіксуються у верхній частині сторінки в міру прокручування.Цей підхід особливо корисний, коли основні CTA - такі як "увійти в систему" або "зв'язатися з нами" - розташовані безпосередньо в навігаційній панелі, оскільки незалежно від того, де знаходиться користувач, у нього перед очима залишається кнопка, на яку можна натиснути для виконання цільової дії.
2. Гамбургер-меню
Гамбургер-меню є компактною кнопкою з трьох смужок, за якою ховається список посилань. Це дуже популярний вид навігації, особливо в мобільних інтерфейсах, оскільки дозволяє ефективно розпорядитися простором екрану. Однак таке рішення може бути недоступне для користувачів скриндери, тому проектуйте гамбургер-меню з обережністю та переконайтеся, що воно відповідає вимогам доступності.
3. Мегаменю
Мегаменю – звичний шаблон для багатьох сайтів електронної комерції, таких як Amazon. Воно являє собою велику панель, що містить усі категорії та підкатегорії. Цей формат дозволяє людям з першого погляду оцінити контент сайту та швидко знайти потрібний розділ.
Головний недолік мегаменю полягає в тому, що воно може збити відвідувачів з пантелику, адже вони бачать занадто велику кількість опцій одночасно. Мегаменю можуть бути перевантаженими, особливо на мобільних пристроях, що робить їх менш візуально привабливими. Один із способів уникнути цього – створювати мегаменю всередині окремих пунктів основного меню, як показано на прикладі нижче.
Елегантне мегаменю в розділі "Рішення" на сайті VividWorks, де представлені всі пропозиції компанії.
4. Випадаюче меню, яке відкривається після наведення курсору
Мегаменю часто є різновидом цього навігації. Коли ви наводите курсор на опцію в навігаційній панелі, під нею розкривається меню, що містить категорії та розділи другого рівня.
Хоча це чудовий спосіб надати користувачам більше прямих посилань на сторінки сайту, він може бути спірним з погляду UX.Функціонал меню, що випадає, передбачає, що відвідувачі захочуть взаємодіяти з кожною опцією, на яку вони наведуть курсор — що може відповідати дійсності, а може і ні.
Крім того, цей підхід може бути неефективним з погляду чуйності дизайну, оскільки меню, що випадають, не завжди добре працюють на мобільних пристроях.
5. Меню по скроллу (якорні посилання)
Такі меню особливо часто зустрічаються у дизайні односторінкових сайтів. Зазвичай меню по скроллу виглядає так само, як стандартна горизонтальна навігаційна панель, але відрізняється механізмом дії: замість того, щоб перенаправляти відвідувачів на окрему сторінку, клік по опції автоматично прокручує поточну сторінку до вибраного розділу.
Такий тип навігації робить досвід взаємодії з односторінковим сайтом більш захоплюючим та організованим.
6. Вертикальна бічна панель
Вертикальні бічні панелі містять список розміщених один під одним пунктів, який розкривається від краю сторінки на кліку. Той факт, що меню залишається прихованим від очей відвідувачів сайту, доки вони не відкриють його, дає низку переваг.
По-перше, меню доступне будь-якої миті, але при цьому не перевантажує дизайн. По-друге, оскільки воно відкривається тільки тоді, коли цього хоче користувач, ви можете додати в навігаційну панель більш довгий текст, не переймаючись тим, скільки місця він займе. Зазначені переваги роблять такий тип навігації популярним вибором для сайтів агенцій та портфоліо.
Вертикальна бічна панель на сайті компанії Ryder International виглядає свіжо та нестандартно. Коли меню згорнуто, воно займає лише малу частину сторінки, а у відкритому вигляді більше половини – простір для опцій та тексту не обмежений.
7. Футер
Багато дизайнерів використовують футер по максимуму, включаючи довгий список посилань. Футер є цінним елементом сайту, адже він доступний з будь-якої сторінки. Оскільки він знаходиться знизу, простір для розміщення контенту не обмежений.
Меню футера часто містять велику кількість посилань - більше, ніж горизонтальні меню зверху, - і дають сайтам переваги з погляду SEO завдяки обсягу інформації, що зберігається в них.
Найкращі практики в дизайні навігації
Під час створення навігації необхідно зосередитися на зручності, простоті освоєння та доступності. Використовуйте ці три критерії як орієнтир, і ви спроектуєте навігацію, за допомогою якої відвідувачі сайту зможуть швидко та легко знаходити на ньому потрібну інформацію.
- Зручність дозволяє користувачам ефективно і без заминок досягати своїх цілей. Досвід взаємодії має бути приємним, і юзабіліті є однією із гарантій цього.
- Простота освоєння - Це показник того, наскільки легко користувачеві виконати завдання з першого разу і скільки дій йому доведеться повторити, щоб впоратися з нею успішно.
- Доступність - Перший крок до інклюзивного дизайну. Переконавшись, що ваш сайт доступний всім користувачам, ви додасте ще кілька очок у свою скарбничку.
Ось кілька найкращих практик, які відповідають цим критеріям.
1. Додайте хлібні крихти
Хлібні крихти – ключовий елемент навігації. Це найпростіший спосіб знайти дорогу додому (буквально та метафорично). Наше завдання як дизайнерів - зробити так, щоб користувачі могли за бажання повернутися до початку, не натискаючи кнопку "Назад" незліченну кількість разів.
Хлібні крихти дозволяють візуалізувати пройдений відвідувачем шлях, спираючись на структуру URL. Таке рішення часто можна зустріти на складних сайтах електронної комерції з безліччю різних категорій, як у наведеному нижче прикладі.
У цьому проекті ви можете побачити крихти для різних категорій і підкатегорій продуктів харчування. Якщо ви хочете заглибитись у тему створення ефективної та зручної навігації для сайтів електронної комерції, почитайте цю докладну статтю від Baymard.
Зазвичай хлібні крихти складаються з текстових посилань, що чергуються із символом "більше ніж(>).Вони можуть виглядати приблизно так: Переглянута сторінка > Переглянута сторінка > Поточна сторінка. Це найпростіший і надійніший спосіб зробити навігацію більш зрозумілою та зручною.
2. Використовуйте знайому мову та інтуїтивно зрозумілу навігацію
Пункти меню мають бути написані максимально простою та універсальною мовою. Залишіть каламбури та химерні фрази для основного тексту, а меню зробіть інтуїтивно зрозумілим.
Хороша навігація спирається на ретельно продуману інформаційну архітектуру та ієрархію. Протягом одного-двох кліків користувач повинен мати можливість знайти те, що потрібно, незалежно від глибини посилання.
Як стверджує Nielsen Norman Group, наша мета полягає у тому, щоб люди "покладалися на розпізнавання, а не на запам'ятовування", тобто меню повинні бути короткими і зручними для сканування, але при цьому максимально зрозумілими. Цього можна досягти, обмеживши кількість рівнів навігації максимум трьома-чотирма. Чим більше рівнів, тим легше користувачам заблукати в лабіринті сторінок. У Nielsen Norman Group є відмінна бібліотека ресурсів, присвячених темі навігації.
3. Організуйте навігацію стратегічно
Ціль, яку ви хочете досягти за допомогою вашого сайту, повинна бути відображена в навігаційній панелі. Одна з найкращих практик – додавання в меню CTA-кнопки, щоб підштовхнути користувачів до здійснення цільової дії. Вам варто подумати про цей аспект ще до того, як ви почнете створювати свій сайт.
Наприклад, якщо ваш сайт електронної комерції надає оновлення, ви можете додати до панелі навігації іконку дзвіночка. Це направить користувачів до найбільш важливої для них інформації.
4. Підтримуйте однаковість структури та стилю
Якщо одноманітності немає, користувачі не розуміють, де що знаходиться. Бувають ситуації, коли звіти Google показують, що люди шукають певні сторінки, через що дизайнер додає в меню посилання, які абсолютно в нього не вписуються.
На жаль, однаковість завжди передбачає складний вибір. Або щось має логічний сенс, чи ні. Або у всіх категорій є підкатегорії, або їх взагалі немає. Таким чином, первинна та вторинна навігація повинні давати користувачам однаковий досвід взаємодії.
Стиль також є важливою частиною одноманітного дизайну. Загальновизнані шаблони допомагають ідентифікувати пункти меню та спрощують пошук. Наприклад, підкреслення сигналізує, що текст є посиланням, і на нього можна натиснути. Така, здавалося б, проста деталь може зробити подорож користувача приємнішою.
5. Подбайте про чуйність
Дизайнер повинен спроектувати навігацію для екранів різних розмірів – від комп'ютерів до мобільних пристроїв. Ось чудовий проект із туторіалом зі створення чуйної панелі навігації.
6. Слідкуйте за контрастом кольору
Оскільки меню відображають базову структуру сайту, важливо, щоб вони мали належний колірний контраст і наслідували кращі практики, встановлені WCAG.
Необхідно перевірити коефіцієнт контрастності та переконатися, що контент залишається доступним для людей з дальтонізмом та іншими порушеннями зору. Використовуйте інструмент перевірки контрастності, щоб переконатися, що люди зі слабким зором можуть отримати доступ до вашого контенту.
7. Перевірте меню на доступність
Переконайтеся, що меню, що випадають, можуть бути належним чином використані за допомогою миші та клавіатури, щоб усі відвідувачі мали доступ до підменю. Додайте помітні стани фокусу, щоб зробити роботу з клавіатурою більш ефективною та забезпечити можливість керування навігацією різними способами.
8. Забезпечте читабельність та функціональність меню на різних пристроях
При проектуванні навігації важливо пам'ятати про людей, які використовують сенсорні екрани на невеликих пристроях, таких як смартфони, а також користувачів з порушеннями дрібної моторики.Їх взаємодія з інтерфейсом може бути ефективним лише в тому випадку, якщо область кліка буде досить великою, а меню, що випадає, відкриватиметься з невеликою затримкою. Якщо воно зникає надто швидко, досвід стає неприємним для будь-якого користувача.
Звичайно, ви можете зробити набагато більше, щоб підвищити доступність вашого сайту. Наш чекіст доступності – хороша відправна точка.
Почніть застосовувати ці найкращі практики прямо зараз
Ми розуміємо, що наші поради можуть спершу здатися вам надто складними.
Однак, якщо ви прислухаєтеся до своїх користувачів і знайдете інтуїтивно зрозуміле рішення, ви створите навігацію, яка не тільки їм сподобається, а й спростить роботу з сайтом.
Навігаційна панель
Ефект анімації цього компонента залежить від медіазапиту prefers-reduced-motion. Дивіться розділ з обмеженим рухом нашої документації про доступність.
Далі ви побачите приклади та список підтримуваних підкомпонентів.
Типи вмісту, що підтримуються
У навбарах є вбудована підтримка багатьох суб-компонентів. Вибирайте потрібний:
- .navbar-brand для назви вашої компанії, продукту чи імені проекту.
- .navbar-nav для навігації повної висоти (включаючи випадаючі елементи).
- .navbar-toggler для використання з нашим JS-плагіном згортання та інших змінних станів навігації.
- .form-inline для будь-яких органів контролю форм та дій з ними.
- .navbar-text для додавання вертикально центрованих рядків тексту.
- .collapse.navbar-collapse для групування та приховування вмісту навбару на певному брейкпойнті батька.
Ось приклад всіх суб-компонентів, які включені в чуйний світлий набар з автоматичним згортанням на брейкпойнт lg (великий).
class="navbar navbar-expand-lg navbar-light bg-light">
class="navbar-brand"
href="#">Navbar
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
class="navbar-toggler-icon">
class="collapse navbar-collapse"
id="navbarSupportedContent">
class="navbar-nav mr-auto">
class="nav-item active">
class="nav-link"
href="#">Home
class="sr-only">(current)
class="nav-item">
class="nav-link"
href="#">Link
class="nav-item dropdown">
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"> Dropdown
class="dropdown-menu"
aria-labelledby="navbarDropdown">
class="dropdown-item"
href="#">Action
class="dropdown-item"
href="#">Інша дія
class="dropdown-divider">
class="dropdown-item"
href="#">Something else here
class="nav-item">
class="nav-link disabled"
href="#">Disabled
class="form-inline my-2 my-lg-0">
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search">
class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search
У цьому прикладі використані класи кольору bg-light та спейсингу my-2, my-lg-0, mr-sm-0, my-sm-0.
Бренд
.navbar-brand можна застосовувати до більшості елементів, але найкраще до посилання, т.к. деякі елементи можуть вимагати класи чи стилі.
class="navbar navbar-light bg-light">
class="navbar-brand"
href="#">Navbar
class="navbar navbar-light bg-light">
class="navbar-brand mb-0 h1">Navbar
Додавання зображень до .navbar-brand майже завжди вимагатиме додаткової стилізації CSS та класів.
class="navbar navbar-light bg-light">
class="navbar-brand"
href="#">
src ="/docs/4.4/assets/brand/bootstrap-solid.svg"
width="30"
height ="30"
alt="">
class="navbar navbar-light bg-light">
class="navbar-brand"
href="#">
src ="/docs/4.4/assets/brand/bootstrap-solid.svg"
width="30"
height ="30"
class="d-inline-block align-top"
alt=""> Bootstrap
Навбар
Посилання в навігації навбару зроблені на параметрах класу .nav з їх власними класами-модифікаторами; і вимагають використання класів тогглера для правильної чуйної поведінки. Навігація в навбарах також займе максимально можливу кількість горизонтального місцядля правильного вирівнювання елементів навбару.
Активні стани – з класом .active – потрібні для індикації можливості застосування поточної сторінки безпосередньо до .nav-link або їхнього безпосереднього батьківського елементу .nav-item .
class="navbar navbar-expand-lg navbar-light bg-light">
class="navbar-brand"
href="#">Navbar
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
class="navbar-toggler-icon">
class="collapse navbar-collapse"
id="navbarNav">
class="navbar-nav">
class="nav-item active">
class="nav-link"
href="#">Home
class="sr-only">(current)
class="nav-item">
class="nav-link"
href="#">Features
class="nav-item">
class="nav-link"
href="#">Pricing
class="nav-item">
class="nav-link disabled"
href="#">Disabled
І т.к. ми використовуємо класи в наших навбарах, ви можете уникати облікового підходу до розмітки, якщо вам потрібно.
class="navbar navbar-expand-lg navbar-light bg-light">
class="navbar-brand"
href="#">Navbar
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation">
class="navbar-toggler-icon">
class="collapse navbar-collapse"
id="navbarNavAltMarkup">
class="navbar-nav">
class="nav-item nav-link active"
href="#">Home
class="sr-only">(current)
class="nav-item nav-link"
href="#">Features
class="nav-item nav-link"
href="#">Pricing
class="nav-item nav-link disabled"
href="#">Disabled
Випадаючі меню вимагають обертального елемента для позиціонування, тому переконайтеся у використанні окремих і вкладених елементів для .nav-item і .nav-link , як у прикладі нижче.
class="navbar navbar-expand-lg navbar-light bg-light">
class="navbar-brand"
href="#">Navbar
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation">
class="navbar-toggler-icon">
class="collapse navbar-collapse"
id="navbarNavDropdown">
class="navbar-nav">
class="nav-item active">
class="nav-link"
href="#">Home
class="sr-only">(current)
class="nav-item">
class="nav-link"
href="#">Features
class="nav-item">
class="nav-link"
href="#">Pricing
class="nav-item dropdown">
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"> Dropdown link
class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
class="dropdown-item"
href="#">Action
class="dropdown-item"
href="#">Інша дія
class="dropdown-item"
href="#">Something else here
Форми
Розміщуйте всередині навбару різні елементи контролю форм та компоненти, додавши до них клас .form-inline.
class="navbar navbar-light bg-light">
class="form-inline">
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search">
class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search
Безпосередні дочірні елементи в .navbar використовують гнучку компоновку і за замовчуванням мають значення justify-content: between .
class="navbar navbar-light bg-light">
class="navbar-brand">Navbar
class="form-inline">
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search">
class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search
Працюють і форми введення, а також:
class="navbar navbar-light bg-light">
class="form-inline">
class="input-group">
class="input-group-prepend">
class="input-group-text"
id="basic-addon1">@
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1">
Різні кнопки підтримуються як частина цих форм у навбарах. Це також гарне нагадування про те, що утиліти вертикального вирівнювання можна використовувати для вирівнювання різних розмірів елементів.
class="navbar navbar-light bg-light">
class="form-inline">
class="btn btn-outline-success"
type="button">Main button
class="btn btn-sm align-middle btn-outline-secondary"
type="button">Smaller button
Текст
Завдяки класу .navbar-text навбари можуть містити «крупиці» тексту. Цей клас надає рядкам тексту вертикальне вирівнювання та горизонтальний спейсинг.
class="navbar navbar-light bg-light">
class="navbar-text"> Navbar text with an inline element
Змішуйте та домагайтеся необхідної відповідності з іншими компонентами та утилітами, як вам треба.
class="navbar navbar-expand-lg navbar-light bg-light">
class="navbar-brand"
href="#">Navbar w/text
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation">
class="navbar-toggler-icon">
class="collapse navbar-collapse"
id="navbarText">
class="navbar-nav mr-auto">
class="nav-item active">
class="nav-link"
href="#">Home
class="sr-only">(current)
class="nav-item">
class="nav-link"
href="#">Features
class="nav-item">
class="nav-link"
href="#">Pricing
class="navbar-text"> Navbar text with an inline element
Колірні схеми
Налаштування оформлення навбарів у Bootstrap стало настільки легким завдяки поєднанню класів оформлення та утиліт background-color. Вибирайте .navbar-light для навбару зі світлим фоном, або .navbar-dark для навбару з темним тлом. Далі налаштовуйте їх класами .bg-*.
class="navbar navbar-dark bg-dark">
class="navbar navbar-dark bg-primary">
class="navbar navbar-light"
style="background-color: #e3f2fd;">
Контейнери
Хоча це не потрібно, ви можете обернути навбар у .container для центрування навбару на сторінці або додати один навбар у .container лише для центрування вмісту навбару з фіксованою позицією “top”.
class="container">
class="navbar navbar-expand-lg navbar-light bg-light">
class="navbar-brand"
href="#">Navbar
Коли контейнер усередині вашого навбару, його горизонтальний паддинг видаляється на брейкпойнтах, менших ніж заданий вами .navbar-expand <-sm|-md|-lg|-xl>. Це гарантує, що не станеться непотрібного подвоєння паддінга на менших в'юпортах, коли ваш навбар згорнуть.
class="navbar navbar-expand-lg navbar-light bg-light">
class="container">
class="navbar-brand"
href="#">Navbar
Розміщення
Використовуйте наші утиліти позиціонування для розміщення навбарів у нестатичних позиціях. Вибирайте з фіксованого вгорі, внизу або приклеюється (прокручується зі сторінкою, доки не досягне верху, і залишається там). Фіксовані навбари використовують position: fixed , тому вони виключені з нормальної будови DOM і можуть вимагати додавання CSS (наприклад, padding-top).
Також зверніть увагу, що .sticky-top використовує position: sticky , яка не підтримується повністю у кожному браузері.
class="navbar navbar-light bg-light">
class="navbar-brand"
href="#">Default
class="navbar fixed-top navbar-light bg-light">
class="navbar-brand"
href="#">Fixed top
class="navbar fixed-bottom navbar-light bg-light">
class="navbar-brand"
href="#">Fixed bottom
class="navbar sticky-top navbar-light bg-light">
class="navbar-brand"
href="#">Sticky top
Чуйна поведінка
Навбари можуть використовувати класи. У поєднанні з іншими класами можна легко вибрати, коли показати або приховати деякі елементи.
Для навбарів, які не ховаються, додайте в навбар клас .navbar-expand. Для навбарів, які завжди ховаються, не додавайте його.
Тогглер (кнопка розгортання меню)
Тогглери за промовчанням вирівняні по лівому краю, але якщо вони йдуть за дочірніми елементами як .navbar-brand – вони автоматично вирівняються праворуч. Дзеркальне відображення вашої розмітки переставить і тоглер.
Без показаного елемента класу .navbar-brand , на найменших брейкпойнтах:
class="navbar navbar-expand-lg navbar-light bg-light">
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation">
class="navbar-toggler-icon">
class="collapse navbar-collapse"
id="navbarTogglerDemo01">
class="navbar-brand"
href="#">Hidden brand
class="navbar-nav mr-auto mt-2 mt-lg-0">
class="nav-item active">
class="nav-link"
href="#">Home
class="sr-only">(current)
class="nav-item">
class="nav-link"
href="#">Link
class="nav-item">
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true">Disabled
class="form-inline my-2 my-lg-0">
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search">
class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search
З брендом, показаний зліва, та тогглером - праворуч:
class="navbar navbar-expand-lg navbar-light bg-light">
class="navbar-brand"
href="#">Navbar
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation">
class="navbar-toggler-icon">
class="collapse navbar-collapse"
id="navbarTogglerDemo02">
class="navbar-nav mr-auto mt-2 mt-lg-0">
class="nav-item active">
class="nav-link"
href="#">Home
class="sr-only">(current)
class="nav-item">
class="nav-link"
href="#">Link
class="nav-item">
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true">Disabled
class="form-inline my-2 my-lg-0">
class="form-control mr-sm-2"
type="search"
placeholder="Search">
class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search
З тогглером зліва та брендом справа:
class="navbar navbar-expand-lg navbar-light bg-light">
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03"
aria-expanded="false"
aria-label="Toggle navigation">
class="navbar-toggler-icon">
class="navbar-brand"
href="#">Navbar
class="collapse navbar-collapse"
id="navbarTogglerDemo03">
class="navbar-nav mr-auto mt-2 mt-lg-0">
class="nav-item active">
class="nav-link"
href="#">Home
class="sr-only">(current)
class="nav-item">
class="nav-link"
href="#">Link
class="nav-item">
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true">Disabled
class="form-inline my-2 my-lg-0">
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search">
class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search
Зовнішній вміст
Іноді треба використовувати плагін колапсу для запуску прихованого вмісту на сторінці. Т.к.
Звільнений вміст
class="pos-f-t">
class="collapse"
id="navbarToggleExternalContent">
class="bg-dark p-4">
class="text-white">Звільнений вміст
class="text-muted">Toggleable via navbar brand.
class="navbar navbar-dark bg-dark">
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarToggleExternalContent"
aria-controls="navbarToggleExternalContent"
aria-expanded="false"
aria-label="Toggle navigation">
class="navbar-toggler-icon">
