Creating a Menu Item from a New or Existing Page

First, we can create a menu item from a new or existing page. Go to "Edit" for the page, and in the right hand toolbar, select Menu Settings.

The link title will autofill based on the title of the page.

The menu link title can be rewritten, and it will not change the title of the page. This is useful if the page title is too long as a menu item.

Now we can look at how to place the item. Main Navigation will place it directly in the menu.

<Main navigation>
-- Demo
-- Home (disabled)

You can place it inside other menu items, and the parent becomes a dropdown. For example, "Demo" is now a dropdown, with "About" nested inside. 

Weight
Menu links with lower weights are displayed before links with higher weights.

Now we can see "Demo" as a dropdown parent link, with About nested inside. 

Another way to edit menu items is with contextual links. When hovering over the menu, click the pencil icon (contextual link).

Open Main navigation configuration options

When you are using  a link as a dropdown, we want to make sure it is expanded. This ensures that the dropdown will open and show its nested items. Go to Demo, and choose "Edit".

Check the "Show as expanded" field is toggled on and Save. 

Now we can rearange items. On the menu edit, you can use the crosshairs to drag and drop menu items to be nested, or their own parent items. Here, About has been moved out of Demo.

So far we have added internal links that have directed to pages within our site. Now we can add an external. Click "Add link" on menu edit.

For testing, I am just using the title "External link", and for the link, I am adding "https://google.com"

Now it will direct outside of your site. 

Sometimes it is useful to have a menu items that does not direct anywhere and it not a link, as a dropdown parent item. This is called a "No Link". To add one, click "Add Link".

To create this, type "&lt;nolink&gt;" in the Link field. You can also find this information in the help text section underneath the Link field.

Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com. Enter <front> to link to the front page. Enter <nolink> to display link text only. Enter <button> to display keyboard-accessible link text only.

Now it is in the menu, but it is not clickable. 

We can put all of these elements together now and create a resources dropdown as an example. Edit "No Link".

I am changing the Menu Link to say "Resources".

Menu link title
The text to be used for this link in the menu.
Link
The location this menu link points to.
Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as http://example.com. Enter <front> to link to the front page. Enter <nolink> to display link text only. Enter <button> to display keyboard-accessible link text only.
 Enabled
A flag for whether the link should be enabled in menus or hidden.
Description
Shown when hovering over the menu link.
 Show as expanded
If selected and this menu link has children, the menu will always appear expanded. This option may be overridden for the entire menu tree when placing a menu block.
Attributes
Parent link
<User account menu>
-- My account
-- Log out
<Administration>
-- Administration
---- Content
---- Structure
------ Block layout (disabled)
------ Block types
------ Contact forms
------ Content types
------ Context
-------- Add new context
------ Display modes
-------- Form modes
-------- View modes
------ Menus
------ Paragraph types
-------- Add paragraph type
------ Taxonomy
------ Views
------ Webforms
------ Conditional fields
---- Appearance
---- Extend
---- Configuration
------ People
-------- Account settings
------ System
-------- Basic site settings
-------- Cron
-------- Delete orphaned composite
-------- Gin Login
------ Content authoring
-------- Diff
-------- Linkit
-------- Paragraphs settings
-------- Require Revision Log Message (disabled)
-------- Text formats and editors
-------- Cancel button settings
------ User interface
-------- Menu Breadcrumb
-------- Shortcuts
-------- Antibot
------ Development
-------- Performance
-------- Development settings
-------- Logging and errors
-------- Maintenance mode
-------- Backup and Migrate
---------- Restore
---------- Saved Backups
---------- Schedule
---------- Settings
-------- Configuration synchronization
------ Media
-------- Crop types
-------- File system
-------- Image styles
-------- ImageWidgetCrop settings
--

Toggle on "Show as expanded" field to create the dropdown effect.

Using crosshairs, I am moving External Link and About into the Resources dropdown. 

Show submenu of
Resources
External Link
About

How to create internal, external, nested, and "nolink" menu items, using both basic page edit and the menu contextual link.

Creating Menu Links