How to Create Dreamweaver Breadcrumbs


Breadcrumbs allow website users to see the Internet path they took to get to the current page. The breadcrumbs, which display as a series of links across the top of the page, show each page the user has recently clicked. Since the user can use the breadcrumbs links to navigate back to specific pages, breadcrumbs serve as a kind of menu. In Dreamweaver, a leading website development program, you can create breadcrumbs with the prebuilt Breadcrumbs code snippet in the Snippets panel.

  • Open an existing Dreamweaver HTML page in which you want to create a breadcrumbs menu, or start a new page by clicking the "File" menu and choosing "New." This opens the New Document dialog box. Choose "HTML" from the page type list and click the "Create." button

  • Click in the section of the page where you want to place the breadcrumbs menu.

  • Click the "Window" menu and choose "Snippets" to open the Snippets panel.

  • Double-click the "Navigation" folder to open it.

  • Select "Breadcrumbs", and then click the "Insert" button in the lower-left corner of the Snippets panel. Dreamweaver inserts a breadcrumbs menu template into the page.

  • Select the first menu item text, i.e. "Lorem," and type the desired menu item text. For example, if the site's homepage is the first page in the breadcrumbs trail, type "Home."

  • Repeat this process for each menu item in the breadcrumbs trail. You can add additional items by inserting them into trail. For example, if your trail reads: Home> Services> Flash > Applications, and you want to add another item to the trail, you would add the item to the end of the trail, or insert it into the trail as needed, such as, Home> Services> Design > Flash > Applications.

  • Select the first menu item, right-click it, and then choose "Change Link" from the pop-up menu. This opens the Select File dialog box. Type the desired link for the menu item in the "URL" field.

  • Click "OK."

  • Repeat this process to create links for each menu item.

  • Click the "File" menu and choose "Save As." This opens the Save As dialog box. Name and save the file.

Related Searches


  • Photo Credit Thinkstock Images/Comstock/Getty Images
Promoted By Zergnet



Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!