Edit in JSFiddle

<!-- when we set up item's url - it will behave as a simple navigation item -->
<perch:if exists="navitemhref">
    <a href='<perch:content id="navitemhref" type="text" label="Navigation Item URL" />'><perch:content id="navitem" type="text" label="Navigation Item Label" required="true" title="true" /></a>
<perch:else/>

<!-- if we skip the url we can now define multiple Perch Block -->
    
<perch:blocks>
  <!-- Column acts like a breaking point and we will use it to create a separate sub navigation -->
    <perch:block type="col" label="Column">
        <perch:content required id="collabel" type="text" label="Column Label" />
    </perch:block>
  
  <!-- In between of every column we create a number of items that will represent links -->
    <perch:block type="item" label="Item">
        <perch:content id="colitemhref" required type="text" label="Item URL" order="2" help="A valid URL for browser." />
        <perch:content id="colitem" required type="text" label="Item" order="1" help="Human friendly."/>
    </perch:block>
</perch:blocks>

</perch:if>