Расширенная навигация

Статья создана

Обновлена 24 апреля 2025 г.

Платформа поддерживает гибкую настройку верхней навигации («шапки») на странице.
Для этого используется пакет page-constructor.

В StoryBook можно ознакомиться с примерами конфигурации навигации.

Настройка

Важно

Стоит учитывать, что при использовании расширенной навигации вся развертка страницы переходит в режим page-constructor.
Будут отличаться отступы контента от краев экрана.

В этом режиме игнорируются любые настройки навигации из .yfm файла.

Блок конфигурации добавляется в toc.yaml следующим образом:

title: Docs navigationExample
href: index.md
navigation:
  logo:
    url: 'https://diplodoc.com'
    dark:
      icon: 'https://storage.yandexcloud.net/diplodoc-www-assets/logo/ddos-logo-dark.svg'
      text: 'Diplodoc'
    light:
      icon: 'https://storage.yandexcloud.net/diplodoc-www-assets/navigation/diplodoc-logo.svg'
      text: 'Diplodoc'
  header:
    leftItems:
      - text: 'Relative Link'
        type: 'link'
        url: './ru/settings'
      - text: 'Absolute Link'
        type: 'link'
        url: 'https://diplodoc.com/docs/ru/project/'
    rightItems:
      - text: 'Other Link'
        type: 'link'
        url: 'ru/contribution'
      - type: controls

Относительные ссылки расчитываются всегда от корня проекта, на каком бы уровне ни находился toc.yaml

Специальные элементы

controls — отвечает за позицию размещения поиска и настроек в навигации.
Если не указан вручную, то автоматически добавляется последним элементом в rightItems.

Была ли статья полезна?

Оглавление на странице документации

Разводящая страница