# Навигация {#nav}

Ключ `nav` в конфигурации — это панель навигации, отображаемая в верхней части страницы. Она содержит заголовок сайта, ссылки глобального меню и т. д.

## Название и логотип сайта {#site-title-and-logo}

По умолчанию навигация отображает название сайта, ссылаясь на значение [`config.title`](./site-config#title). Если вы хотите изменить то, что отображается в панели навигации, задайте пользовательский текст в опции `themeConfig.siteTitle`.

```js
export default {
  themeConfig: {
    siteTitle: 'Мой заголовок'
  }
}
```

Если у вас есть логотип для вашего сайта, вы можете отобразить его, передав путь к изображению. Вы должны поместить логотип непосредственно в директорию `public` и указать абсолютный путь к нему.

```js
export default {
  themeConfig: {
    logo: '/my-logo.svg'
  }
}
```

При добавлении логотипа он отображается вместе с названием сайта. Если вам нужен только логотип и вы хотите скрыть текст заголовка сайта, установите `false` для параметра `SiteTitle`.

```js
export default {
  themeConfig: {
    logo: '/my-logo.svg',
    siteTitle: false
  }
}
```

Вы также можете передать объект в качестве логотипа, если хотите добавить атрибут `alt` или настроить его в зависимости от тёмного/светлого режима. Подробности смотрите в [`themeConfig.logo`](./default-theme-config#logo).

## Навигационные ссылки {#navigation-links}

Вы можете определить опцию `themeConfig.nav`, чтобы добавить ссылки в панель навигации:

```js
export default {
  themeConfig: {
    nav: [
      { text: 'Руководство', link: '/guide' },
      { text: 'Настройка', link: '/config' },
      { text: 'Изменения', link: 'https://github.com/...' }
    ]
  }
}
```

`text` — это текст, отображаемый в навигации, а `link` — это ссылка, на которую будет осуществлён переход при нажатии на текст. Для ссылки задайте путь к фактическому файлу без префикса `.md` и всегда начинайте с `/`.

Навигационные ссылки также могут быть выпадающими меню. Для этого установите ключ `items` вместо ключа `link`:

```js
export default {
  themeConfig: {
    nav: [
      { text: 'Руководство', link: '/guide' },
      {
        text: 'Выпадающее меню',
        items: [
          { text: 'Пункт A', link: '/item-1' },
          { text: 'Пункт B', link: '/item-2' },
          { text: 'Пункт C', link: '/item-3' }
        ]
      }
    ]
  }
}
```

Обратите внимание, что заголовок выпадающего меню (`Выпадающее меню` в примере выше) не может иметь свойство `link`, так как он становится кнопкой для открытия выпадающего диалога.

Вы можете добавить «секции» в пункты выпадающего меню, передавая больше вложенных элементов:

```js
export default {
  themeConfig: {
    nav: [
      { text: 'Руководство', link: '/guide' },
      {
        text: 'Выпадающее меню',
        items: [
          {
            // Заголовок секции
            text: 'Секция A',
            items: [
              { text: 'Пункт A в секции A', link: '...' },
              { text: 'Пункт B в секции A', link: '...' }
            ]
          }
        ]
      },
      {
        text: 'Выпадающее меню',
        items: [
          {
            // Заголовок можно опустить
            items: [
              { text: 'Пункт A в секции A', link: '...' },
              { text: 'Пункт B в секции A', link: '...' }
            ]
          }
        ]
      }
    ]
  }
}
```

### Настройка «активного» состояния ссылки {#customize-link-s-active-state}

Пункты меню навигации будут выделены, если текущая страница находится под соответствующим путём. Если вы хотите настроить сопоставление путей, определите свойство `activeMatch` и регулярное выражение в качестве строкового значения.

```js
export default {
  themeConfig: {
    nav: [
      // Эта ссылка получает активное состояние, когда пользователь
      // переходит по пути `/config/`.
      {
        text: 'Руководство',
        link: '/guide',
        activeMatch: '/config/'
      }
    ]
  }
}
```

::: warning ПРЕДУПРЕЖДЕНИЕ
Ожидается, что `activeMatch` будет регулярным выражением, но вы должны определить его как строку. Мы не можем использовать здесь реальный объект RegExp, потому что он не сериализуется во время сборки.
:::

### Настройка атрибутов «target» и «rel» {#customize-link-s-target-and-rel-attributes}

По умолчанию VitePress автоматически определяет атрибуты `target` и `rel` в зависимости от того, является ли ссылка внешней. Но при желании их можно настроить и вручную.

```js
export default {
  themeConfig: {
    nav: [
      {
        text: 'Товары',
        link: 'https://www.thegithubshop.com/',
        target: '_self',
        rel: 'sponsored'
      }
    ]
  }
}
```

## Социальные ссылки {#social-links}

См. [`socialLinks`](./default-theme-config#sociallinks).