This tutorial will show you how to insert a UEF Sub-Navigation component on your page. We will create a navigational list of fruits and vegetables.
- Place your cursor in the document where you want the Sub-Navigation component to appear.
- Type
uef-subnav
and click the snippet to insert it. At this point, you won't see much of anything until you add a Sub-Navigation Title, a Group, or Links.
- Select
true
fordata-uef-nav-sub_nav-status_icons
if you want to use Status Icons within the Sub-Navigation component. For our example, we'll set it to false. - Select
true
fordata-uef-nav-sub_nav-hide_header
if you want to hide the Sub-Navigation Title. We don't want to hide the title in our example, so set this to false. - Enter your Sub-Navigation Title. Let's enter 'Foods' for our title.
At this point you will have a Sub-Navigation component with a Title. There will be no Sub-Navigation items at this point, so you'll need to add either Links or Groups.
- Type
uef-subnav-add-link
to add a link item within your Sub-Navigation component. - Delete
uef-container-separator
if you don't want separator lines between link items. In our example, we'll keep it. - Select
available
orunavailable
to set the display status of the link. In our example, select Available. - Replace the
#
with the name of an HTML file you are linking to— or, leave the#
for now, if you don't have another page ready to link to at this time. For our example, just leave the # character for now. - Again, select
available
orunavailable
to set the assistive display status of the link. For our example, select Available. - Finally, type the name of the Link. For our example, type 'Eating Healthy'.
- Type
uef-subnav-add-group
to add a group item within your Sub-Navigation component. - Delete
uef-container-shaded
if you don't want the group to be a shaded color. For our example, let's delete it. - Delete
uef-container-separator
if you don't want a separator line between groups. For our example, let's keep it. - Select
available
if this Group can be selected. Useunavailable
to denote the Group is not selectable. For our example, we want to select Available. - Enter your Group's title. For our example, this group will be called 'Fruits'.
- Enter your Group's name. This can be the same as the Group's title, but make sure there are no spaces in this name.
- Finally, enter the display name for your first item within this group. Four our example, let's enter Apple.
Now, let's add a second group to make this a little more realistic. But this time, let's make the group appear collapsed when the page loads.
- Type
uef-subnav-add-group-collapsed
to add a group item within your Sub-Navigation component. - Delete
uef-container-shaded
if you don't want the group to be a shaded color. For our example, let's delete it. - Delete
uef-container-separator
if you don't want a separator line between groups. For our example, let's keep it. - Select
available
if this Group can be selected. Useunavailable
to denote the Group is not selectable. For our example, we want to select Available. - Enter your Group's title. For our example, this group will be called 'Fruits'.
- Enter your Group's name. This can be the same as the Group's title, but make sure there are no spaces in this name.
- Finally, enter the display name for your first item within this group. Four our example, let's enter Apple.