Jump to content

Navigation: Difference between revisions

From Swarthmore Knowledge Base
← Older editNewer edit →
VisualWikitext
Kwhiteb1 (talk | contribs)
itsstaff
189 edits
No edit summary
Kwhiteb1 (talk | contribs)
itsstaff
189 edits
No edit summary
Line 1: Line 1:
← [[Drupal Home|Return to the Drupal 10 User Guide]]
{{DrupalBack}}


This section covers how to manage your site’s navigation, including: adding, removing, and changing the sort order of navigational links items.
This section covers how to manage your site's navigation, including adding, removing, and changing the sort order of navigation items.


== 5.1) Accessing a Site’s Navigation ==
== 5.1 Accessing a Site's Navigation ==


To access a site’s navigation, goto '''1) Site Settings'''. Then click '''2) Manage Navigation''' in the sub-menu bar. This will open the Navigation editor (see 5.2).
To access a site's navigation, go to '''1) Site Settings'''. Then click '''2) Manage Navigation''' in the submenu. This will open the Navigation editor (see 5.2).


[[File:navigation_1.png|593px|alt=navigation_1.png]]
{{Screenshot|navigation_1.png|593px|Screenshot showing the Site Settings menu with the Manage Navigation option highlighted.|Access the Navigation editor from the Site Settings menu.}}


== 5.2) How the Navigation Editor Works ==
== 5.2 How the Navigation Editor Works ==


# '''Title''' - Is the name that appears at the top of the navigation component. This is always set as the name that appears on your homepage and should not be changed.
# '''Title''' - The name displayed at the top of the navigation component. This is always the name of your homepage and should not be changed.
# '''Menu Link''' - This displays all the webpages that appear in your site navigation. It allows you to arrange the sort order of navigational. Hover your mouse pointer over the '''+''' icon located to the left of the page name. When the pointer changes to '''+''' symbol, then you can click and drag-n-drop the page link to another location in the navigation.
# '''Menu Link''' - Displays all webpages that appear in your site's navigation. To rearrange navigation items, hover over the '''+''' icon to the left of a page name. When the cursor changes, click and drag the page to its new location.
# '''Enabled/Disabled '''- By checking or unchecking this box, you can temporarily hide a navigation item from appearing in the navigation.
# '''Enabled/Disabled''' - Check or uncheck this box to temporarily show or hide a navigation item.
# '''Operations '''- This drop down menu lets you '''Edit '''and existing link name or '''Delete/Remove''' it from the navigation.
# '''Operations''' - This dropdown menu allows you to '''Edit''' an existing link name or '''Delete''' it from the navigation.
# '''Add Link''' - Allows you to add a new link. See 5.4 (below) for more information about adding links.
# '''Add Link''' - Allows you to add a new navigation link. See section 5.4 for more information.
# '''Save''' - You must click Save in order for your changes to appear on the website.
# '''Save''' - Click '''Save''' for your changes to appear on the website.


{{Card|variant=info|title=Info|content='''Note:''' All changes made to a site’s navigation are live the moment you click '''Save'''. There is no DRAFT view of navigational changes.}}
{{Callout|type=warning|title=Changes Are Immediate|content=All navigation changes become live as soon as you click '''Save'''. Unlike page content, navigation changes do not have a draft state.}}
[[File:navigation_editor1.png|579px|alt=navigation_editor1.png]]


== 5.3) Arranging the Sort Order of Navigation ==
{{Screenshot|navigation_editor1.png|579px|Screenshot of the Navigation editor showing the menu structure and editing controls.|The Navigation editor.}}


Moving your mouse over the '''+''' icon will change mouse pointer to a '''+ '''symbol. You can click and drag-n-drop the list item to another position. List items indented under another list item are subpages (or child pages) to the parent list item above. Drupal can support up to four levels of sub-navigation.
== 5.3 Arranging the Sort Order of Navigation ==


[[File:Screenshot 2024-07-29 at 5.00.58 PM.png|868px]]
Moving your mouse over the '''+''' icon changes the cursor so you can click and drag a menu item to a new position. Items indented beneath another menu item become child pages of the parent above them.
{{Card|variant=info|title=Info|content=It is recommended that you keep your navigation to three levels whenever possible. While the fourth level of navigation is available if needed, keeping the website at three levels is generally preferable.


For example Biology is using three levels for its navigation:
Drupal supports up to four levels of navigation.


1st Level - Biology Homepage
{{Screenshot|Screenshot 2024-07-29 at 5.00.58 PM.png|868px|Screenshot demonstrating drag-and-drop navigation ordering within the Navigation editor.|Drag and drop menu items to change the navigation hierarchy.}}


2nd Level - Academic Program
{{Callout|type=tip|title=Best Practice|content=It is recommended that you keep your navigation to three levels whenever possible. Although Drupal supports a fourth level, limiting your navigation depth generally makes websites easier to navigate.


3rd Level - Course Majors & Minors
For example:


4th level - (Optional Fourth Level Page Available, If Needed)}}
* '''1st Level''' — Biology Homepage
* '''2nd Level''' — Academic Program
* '''3rd Level''' — Course Majors & Minors
* '''4th Level''' — Optional (if needed)}}


== <br>5.4) Adding a Page to Navigation ==
== 5.4 Adding a Page to Navigation ==


'''Add Link -''' To add a new page/link to the navigation, click the '''Add Link''' button under '''Manage Navigation'''
To add a new page or link to the navigation, click the '''Add Link''' button in the '''Manage Navigation''' screen.


[[File:add_link1.png|700px|alt="Edit Biology" page showing navigation menu links with an active checkbox and an "+ Add link" button highlighted]]
{{Screenshot|add_link1.png|700px|Screenshot showing the Add Link button in the Navigation editor.|Select '''Add Link''' to create a new navigation item.}}
5.4.1 '''Link - '''Place your cursor in the '''Link''' field and start typing the title of the page you wish to add (such as "Admissions"). You can also enter an internal path such as /admissions-aid or an external URL such as https://swarthmoreathletics.com/.


5.4.2 '''Menu Link Title '''- The menu link title is the link name what displays on the webpage. If you select another page in Drupal in 5.4.1, the menu link title will automatically autofill with the page title. It is generally recommended that you let the link name will match the page that it is linked to if referencing another Drupal page. If you link to an external page (ie a webpage not in Drupal) or to document (pdf), you will need to manually add your own Menu Link Title.
# '''Link''' - Place your cursor in the '''Link''' field and begin typing the title of the page you wish to add (for example, "Admissions"). You may also enter an internal path such as <code>/admissions-aid</code> or an external URL such as <code>https://swarthmoreathletics.com/</code>.
# '''Menu Link Title''' - This is the text displayed in the navigation. When selecting another Drupal page, this field is automatically populated using the page title. If linking to an external website or document, you will need to provide your own title.
# '''Link to a Document''' - Select or upload a document to create a navigation link directly to that file.
# '''Enabled/Disabled''' - Determines whether the navigation link is immediately visible.
# '''Parent Link''' - Places the link beneath an existing navigation item when it is created, reducing the amount of drag-and-drop required afterward.
# '''Save''' - Save your changes.


5.4.3 '''Link to a Document '''- To link to a document, click "Link to Document" below to select or upload a document.
{{Screenshot|add_menu_link1.png|713px|Screenshot of the Add Menu Link form showing the available fields.|The Add Menu Link form.}}


5.4.4 '''Enabled/Disabled - '''You set the link as being enabled (live) or disabled (hidden) when added to the navigation.
== 5.5 Editing or Removing a Navigation Link ==


5.4.5 '''Parent Link - '''Lets you add the link to a specific submenu item when saved. This can be helpful for navigations with lots of items as it minimizes the amount of drag-n-drop required to position a link to the correct position.
You can edit or remove an existing navigation link using the '''Operations''' menu.


5.4.6 '''Save''' - Save your changes
# Click '''Edit''' in the Operations dropdown to edit an existing navigation link.


[[File:add_menu_link1.png|713px|alt=add_menu_link1.png]]
{{Screenshot|edit_1.png|509px|Screenshot showing the Edit option in the Operations menu.|Choose '''Edit''' to modify a navigation link.}}


== 5.5) Editing/Removing the Navigation Link Name ==
# Select '''Delete''' from the same menu if you wish to remove the navigation link.


You can edit the properties of an existing Link reference by clicking EDIT in the submenu.
{{Screenshot|edit_3.png|509px|Screenshot showing the Delete option in the Operations menu.|Choose '''Delete''' to remove a navigation link.}}


1. Click '''EDIT''' in the drop down menu to edit an existing link<br>
If you select '''Edit''', Drupal opens the '''Edit Menu Link''' window.


[[File:edit_1.png|509px|alt=edit_1.png]]
# '''Link''' - Displays the current webpage, external URL, or document referenced by the navigation item.
2. Switch the drop down menu to '''DELETE''' if you wish to remove the link from the navigation
# '''Menu Link Title''' - Displays the text shown in the navigation.
 
# '''Link to a Document''' - Allows you to change the linked document.
[[File:edit_3.png|509px|alt=edit_3.png]]
# '''Enabled/Disabled''' - Allows you to show or hide the navigation link.
If you select EDIT, Drupal will open the''' Edit Menu Link''' window (see below)<br><br>5.5.1 Displays the current webpage, external link, or document that this link currently references.
# '''Save''' - Click '''Save''' to commit your changes.
 
5.5.2 Displays the current '''Menu Link Title'''
 
5.5.3 Lets change the document link
 
5.5.4 Lets you disable/hide or enable/expose the link
 
5.5.5 Click SAVE to commit your changes.
 
[[File:edit_2.png|1054px|alt=edit_2.png]]


{{Screenshot|edit_2.png|1054px|Screenshot of the Edit Menu Link dialog showing the available editing fields.|The Edit Menu Link dialog.}}


[[Category:Drupal]]
[[Category:Drupal]]
<!-- Imported from Confluence page id=173178936 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/173178936/Navigation) -->

Revision as of 13:57, 10 July 2026

← Return to the Drupal User Guide

This section covers how to manage your site's navigation, including adding, removing, and changing the sort order of navigation items.

5.1 Accessing a Site's Navigation

To access a site's navigation, go to 1) Site Settings. Then click 2) Manage Navigation in the submenu. This will open the Navigation editor (see 5.2).

Screenshot showing the Site Settings menu with the Manage Navigation option highlighted.
Figure: Access the Navigation editor from the Site Settings menu.

5.2 How the Navigation Editor Works

  1. Title - The name displayed at the top of the navigation component. This is always the name of your homepage and should not be changed.
  2. Menu Link - Displays all webpages that appear in your site's navigation. To rearrange navigation items, hover over the + icon to the left of a page name. When the cursor changes, click and drag the page to its new location.
  3. Enabled/Disabled - Check or uncheck this box to temporarily show or hide a navigation item.
  4. Operations - This dropdown menu allows you to Edit an existing link name or Delete it from the navigation.
  5. Add Link - Allows you to add a new navigation link. See section 5.4 for more information.
  6. Save - Click Save for your changes to appear on the website.
Changes Are Immediate
All navigation changes become live as soon as you click Save. Unlike page content, navigation changes do not have a draft state.


Screenshot of the Navigation editor showing the menu structure and editing controls.
Figure: The Navigation editor.

5.3 Arranging the Sort Order of Navigation

Moving your mouse over the + icon changes the cursor so you can click and drag a menu item to a new position. Items indented beneath another menu item become child pages of the parent above them.

Drupal supports up to four levels of navigation.

Screenshot demonstrating drag-and-drop navigation ordering within the Navigation editor.
Figure: Drag and drop menu items to change the navigation hierarchy.
Best Practice
It is recommended that you keep your navigation to three levels whenever possible. Although Drupal supports a fourth level, limiting your navigation depth generally makes websites easier to navigate.

For example:

  • 1st Level — Biology Homepage
  • 2nd Level — Academic Program
  • 3rd Level — Course Majors & Minors
  • 4th Level — Optional (if needed)


5.4 Adding a Page to Navigation

To add a new page or link to the navigation, click the Add Link button in the Manage Navigation screen.

Screenshot showing the Add Link button in the Navigation editor.
Figure: Select Add Link to create a new navigation item.
  1. Link - Place your cursor in the Link field and begin typing the title of the page you wish to add (for example, "Admissions"). You may also enter an internal path such as /admissions-aid or an external URL such as https://swarthmoreathletics.com/.
  2. Menu Link Title - This is the text displayed in the navigation. When selecting another Drupal page, this field is automatically populated using the page title. If linking to an external website or document, you will need to provide your own title.
  3. Link to a Document - Select or upload a document to create a navigation link directly to that file.
  4. Enabled/Disabled - Determines whether the navigation link is immediately visible.
  5. Parent Link - Places the link beneath an existing navigation item when it is created, reducing the amount of drag-and-drop required afterward.
  6. Save - Save your changes.
Screenshot of the Add Menu Link form showing the available fields.
Figure: The Add Menu Link form.

5.5 Editing or Removing a Navigation Link

You can edit or remove an existing navigation link using the Operations menu.

  1. Click Edit in the Operations dropdown to edit an existing navigation link.
Screenshot showing the Edit option in the Operations menu.
Figure: Choose Edit to modify a navigation link.
  1. Select Delete from the same menu if you wish to remove the navigation link.
Screenshot showing the Delete option in the Operations menu.
Figure: Choose Delete to remove a navigation link.

If you select Edit, Drupal opens the Edit Menu Link window.

  1. Link - Displays the current webpage, external URL, or document referenced by the navigation item.
  2. Menu Link Title - Displays the text shown in the navigation.
  3. Link to a Document - Allows you to change the linked document.
  4. Enabled/Disabled - Allows you to show or hide the navigation link.
  5. Save - Click Save to commit your changes.
Screenshot of the Edit Menu Link dialog showing the available editing fields.
Figure: The Edit Menu Link dialog.
Retrieved from "https://kb.swarthmore.edu/index.php?title=Navigation&oldid=3577"