github.com/shohhei1126/hugo@v0.42.2-0.20180623210752-3d5928889ad7/docs/content/en/content-management/menus.md (about)

     1  ---
     2  title: Menus
     3  linktitle: Menus
     4  description: Hugo has a simple yet powerful menu system.
     5  date: 2017-02-01
     6  publishdate: 2017-02-01
     7  lastmod: 2017-03-31
     8  categories: [content management]
     9  keywords: [menus]
    10  draft: false
    11  menu:
    12    docs:
    13      parent: "content-management"
    14      weight: 120
    15  weight: 120	#rem
    16  aliases: [/extras/menus/]
    17  toc: true
    18  ---
    19  
    20  {{% note "Lazy Blogger"%}}
    21  If all you want is a simple menu for your sections, see the ["Section Menu for Lazy Bloggers" in Menu Templates](/templates/menu-templates/#section-menu-for-lazy-bloggers).
    22  {{% /note %}}
    23  
    24  You can do this:
    25  
    26  * Place content in one or many menus
    27  * Handle nested menus with unlimited depth
    28  * Create menu entries without being attached to any content
    29  * Distinguish active element (and active branch)
    30  
    31  ## What is a Menu in Hugo?
    32  
    33  A **menu** is a named array of menu entries accessible by name via the [`.Site.Menus` site variable][sitevars]. For example, you can access your site's `main` menu via `.Site.Menus.main`.
    34  
    35  {{% note "Menus on Multilingual Sites" %}}
    36  If you make use of the [multilingual feature](/content-management/multilingual/), you can define language-independent menus.
    37  {{% /note %}}
    38  
    39  A menu entry has the following properties (i.e., variables) available to it:
    40  
    41  `.URL`
    42  : string
    43  
    44  `.Name`
    45  : string
    46  
    47  `.Menu`
    48  : string
    49  
    50  `.Identifier`
    51  : string
    52  
    53  `.Pre`
    54  : template.HTML
    55  
    56  `.Post`
    57  : template.HTML
    58  
    59  `.Weight`
    60  : int
    61  
    62  `.Parent`
    63  : string
    64  
    65  `.Children`
    66  : Menu
    67  
    68  Note that menus also have the following functions available as well:
    69  
    70  `.HasChildren`
    71  : boolean
    72  
    73  Additionally, there are some relevant functions available to menus on a page:
    74  
    75  `.IsMenuCurrent`
    76  : (menu string, menuEntry *MenuEntry ) boolean
    77  
    78  `.HasMenuCurrent`
    79  : (menu string, menuEntry *MenuEntry) boolean
    80  
    81  ## Add content to menus
    82  
    83  Hugo allows you to add content to a menu via the content's [front matter](/content-management/front-matter/).
    84  
    85  ### Simple
    86  
    87  If all you need to do is add an entry to a menu, the simple form works well.
    88  
    89  #### A Single Menu
    90  
    91  ```
    92  ---
    93  menu: "main"
    94  ---
    95  ```
    96  
    97  #### Multiple Menus
    98  
    99  ```
   100  ---
   101  menu: ["main", "footer"]
   102  ---
   103  ```
   104  
   105  #### Advanced
   106  
   107  
   108  ```
   109  ---
   110  menu:
   111    docs:
   112      parent: 'extras'
   113      weight: 20
   114  ---
   115  ```
   116  
   117  ## Add Non-content Entries to a Menu
   118  
   119  You can also add entries to menus that aren’t attached to a piece of content. This takes place in your Hugo project's [`config` file][config].
   120  
   121  Here’s an example snippet pulled from a configuration file:
   122  
   123  {{< code-toggle file="config.toml" >}}
   124  [[menu.main]]
   125      name = "about hugo"
   126      pre = "<i class='fa fa-heart'></i>"
   127      weight = -110
   128      identifier = "about"
   129      url = "/about/"
   130  [[menu.main]]
   131      name = "getting started"
   132      pre = "<i class='fa fa-road'></i>"
   133      weight = -100
   134      url = "/getting-started/"
   135  {{< /code-toggle >}}
   136  
   137  {{% note %}}
   138  The URLs must be relative to the context root. If the `baseURL` is `https://example.com/mysite/`, then the URLs in the menu must not include the context root `mysite`. Using an absolute URL will override the baseURL. If the value used for `URL` in the above example is `https://subdomain.example.com/`, the output will be `https://subdomain.example.com`.
   139  {{% /note %}}
   140  
   141  ## Nesting
   142   
   143  All nesting of content is done via the `parent` field.
   144  
   145  The parent of an entry should be the identifier of another entry. The identifier should be unique (within a menu).
   146  
   147  The following order is used to determine an Identifier:
   148  
   149  `.Name > .LinkTitle > .Title`
   150  
   151  This means that `.Title` will be used unless `.LinkTitle` is present, etc. In practice, `.Name` and `.Identifier` are only used to structure relationships and therefore never displayed.
   152  
   153  In this example, the top level of the menu is defined in your [site `config` file][config]). All content entries are attached to one of these entries via the `.Parent` field.
   154  
   155  ## Render Menus
   156  
   157  See [Menu Templates](/templates/menu-templates/) for information on how to render your site menus within your templates.
   158  
   159  [config]: /getting-started/configuration/
   160  [multilingual]: /content-management/multilingual/
   161  [sitevars]: /variables/