Атрибут data-* тега <nav>
Описание
Атрибуты data-* позволяют хранить произвольные данные в элементе <nav>. Эти атрибуты полезны для:
- Хранения дополнительной информации о навигации
- Интеграции с JavaScript-логикой
- Конфигурации динамических меню
- Передачи данных в CSS через attr()
<nav
data-menu-type="main"
data-visible="true"
data-max-items="5">
<ul>
<li><a href="/">Главная</a></li>
<!-- другие пункты меню -->
</ul>
</nav>
Типовые сценарии применения:
| Атрибут | Пример | Назначение |
|---|---|---|
| data-menu-type | data-menu-type="sidebar" |
Определение типа меню |
| data-active | data-active="home" |
Текущий активный раздел |
| data-collapsible | data-collapsible="true" |
Возможность сворачивания |
| data-source | data-source="/api/menu" |
URL для динамической загрузки |
Пример с CSS:
<style>
nav[data-menu-type="main"] {
background-color: #2c3e50;
}
nav[data-visible="false"] {
display: none;
}
nav::after {
content: attr(data-menu-type);
display: block;
font-size: 0.8em;
color: #999;
}
</style>
<nav data-menu-type="main" data-visible="true">
<!-- Меню -->
</nav>
Рекомендации по именованию:
- Используйте осмысленные имена после префикса data-
- Придерживайтесь одного стиля (kebab-case рекомендуется)
- Избегайте слишком общих имен (data-info, data-settings)
- Для сложных данных используйте JSON в одном атрибуте
Пример с JSON-данными:
<nav id="configurable-nav" data-config='{
"animation": "slide",
"speed": 300,
"responsive": true
}'>
<!-- Меню -->
</nav>
<script>
const navConfig = JSON.parse(
document.getElementById('configurable-nav').dataset.config
);
console.log(navConfig.animation); // "slide"
</script>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Значения всегда строковые (для чисел нужен parseInt/parseFloat)
- Не используйте для чувствительных данных (видны в HTML)
- Доступ через dataset чувствителен к регистру
Примечание: Атрибуты data-* особенно полезны для навигационных систем, которые требуют конфигурации или взаимодействия с JavaScript. Они позволяют хранить мета-информацию о меню прямо в HTML-разметке, делая код более понятным и поддерживаемым.