Menu Item Components

Our index.html is already looking a lot better, but we still have a lot of duplication in our fragments themselves.

In the menu on the left side, each menu item looks similar to this:

The structure of menu items

We can identify the following structure:

• The <a> HTML tag identifies the item as a link that can be clicked to navigate to that part of the application.
• The href attribute indicates where to link to.
• The <svg> child element contains the relevant icon for the menu item.
• The “dashboard” text is shown to the user for the link.
• The class attribute styles the menu item

Note: There is a slight difference in the class list as the Dashboard item is styled to look selected, while the others are not.

Creating a fragment

Let’s create a fragment. Start with a file sidebar-buttons.html to put our fragment in:

This gives us the basic structure to work with. We then declare the following two parameters to our fragment:

• link
• title