Matrix Version:
Matrix version 5
I am using a left hand navigation on all my standard pages. I want to create a parent page that has something like this image attached. What assets do I need to introduce and apply to these pages and change etc to have menus (split or sub)?
I am looking at this for guidance (with 3 sub levels though in different places) https://matrix.squiz.net/manuals/designs/chapters/menu-normal-design-area
Thanks for any help and tips 
Here is the sample one
<!--@@ =============== Secondary Nav Start =============== @@-->
<!-- Heading -->
<MySource_AREA id_name="section_name" design_area="asset_lineage" print="no">
<MySource_SET name="levels_to_print" value="1" />
<MySource_SET name="start_at_level" value="1" />
<MySource_SET name="suffix_with_current_link" value="true" />
<MySource_ASSET>
<h2 class="lhs-column__h"><a href="<MySource_PRINT var="asset_link" />" target="<MySource_PRINT var='asset_metadata_utility.misc_link_target' />"><MySource_PRINT var="asset_short_name" /><em class="mobile-only fa fa-down-arrow"></em></a></h2>
</MySource_ASSET>
<MySource_DIVIDER></MySource_DIVIDER>
</MySource_AREA>
<!-- Heading END-->
<MySource_AREA id_name="sub_navigation" design_area="menu_normal" print="yes">
<MySource_SET name="level" value="sub" />
<MySource_SET name="show_subs" value="on_current" />
<MySource_SET name="settings.class.normal" value="" />
<MySource_SET name="settings.class.current" value="current" />
<MySource_SET name="settings.class.hierarchy" value="heirarchy" />
<nav class="lhs-column" role="navigation">
<!-- Heading Section-->
<MySource_PRINT id_name="section_name" />
<!-- Heading Section END-->
<ul class="lhs-nav">
<MySource_ASSET>
<li class="lhs-nav__item">
<a href="<MySource_PRINT var="asset_link" />" class="lhs-nav__link <MySource_PRINT var="settings.class" />" target="<MySource_PRINT var='asset_metadata_utility.misc_link_target' />"><MySource_PRINT var="asset_short_name" /></a>
<MySource_SUB design_area="menu_normal">
<MySource_SET name="show_subs" value="on_current" />
<MySource_SET name="settings.class.normal" value="" />
<MySource_SET name="settings.class.current" value="current" />
<MySource_SET name="settings.class.hierarchy" value="heirarchy" />
<ul class="lhs-nav-sub">
<MySource_ASSET>
<li class="lhs-nav-sub__item">
<a href="<MySource_PRINT var="asset_link" />" target="<MySource_PRINT var='asset_metadata_utility.misc_link_target' />" class="lhs-nav-sub__link <MySource_PRINT var="settings.class" />"><MySource_PRINT var="asset_short_name" /></a>
<MySource_SUB design_area="menu_normal">
<MySource_SET name="show_subs" value="on_current" />
<MySource_SET name="settings.class.normal" value="" />
<MySource_SET name="settings.class.current" value="current" />
<MySource_SET name="settings.class.hierarchy" value="heirarchy" />
<ul class="lhs-nav-sub2">
<MySource_ASSET>
<li class="lhs-nav-sub2__item">
<a href="<MySource_PRINT var="asset_link" />" target="<MySource_PRINT var='asset_metadata_utility.misc_link_target' />" class="lhs-nav-sub2__link <MySource_PRINT var="settings.class" />"><MySource_PRINT var="asset_short_name" /></a>
<MySource_SUB design_area="menu_normal">
<MySource_SET name="show_subs" value="on_current" />
<MySource_SET name="settings.class.normal" value="" />
<MySource_SET name="settings.class.current" value="current" />
<MySource_SET name="settings.class.hierarchy" value="heirarchy" />
<ul class="lhs-nav-sub3">
<MySource_ASSET>
<li class="lhs-nav-sub3__item">
<a href="<MySource_PRINT var="asset_link" />" target="<MySource_PRINT var='asset_metadata_utility.misc_link_target' />" class="lhs-nav-sub3__link <MySource_PRINT var="settings.class" />"><MySource_PRINT var="asset_short_name" /></a>
</li>
</MySource_ASSET>
</ul>
</MySource_SUB>
</li>
</MySource_ASSET>
</ul>
</MySource_SUB>
</li>
</MySource_ASSET>
</ul>
</MySource_SUB>
</li>
</MySource_ASSET>
</ul>
<MySource_DIVIDER></MySource_DIVIDER>
</nav><!-- /.lhs-column -->
</MySource_AREA>
<!--@@ =============== Normal Sub Nav End =============== @@-->