A way for clients to easily add and delete navigation


Hi Cory

I migrated over to surrealcms just before pagelime closed shop.

Pagelime had an easy way for clients to edit the navigation setup.

Please view screen grab of their documentation.

In the navigation include file the code looked like this:

<ul class="top-nav">
    #foreach( $navItem in $navItems )
         <a href="$navItem.URL" class="top-nav-link">$navItem.Title</a>
         #if ($navItem.ChildNodes.Count > 0)
           <ul class="sub-nav">
             #foreach( $subNavItem in $navItem.ChildNodes )
               <li><a href="$subNavItem.URL" class="sub-nav-link">$subNavItem.Title</a></li>

I know about repeatable regions and it works ok on simple nav setups but for anything more then two levels deep its just not practical.

So I hope you can look at this feature in the next major update for surrealcms

Thanks Cory


I always found PageLime’s navigation tool perplexing. The idea that users need to program their navigation never sat right with me.

Over the years, I’ve tinkered with a handful of ideas specifically for navigation but they never made it to production. Generally speaking, you don’t want to introduce a feature you’ll regret. If the implementation isn’t good (usually a result of shipping something too fast) and a lot of people end up using it, your stuck supporting that feature for a long time and it becomes a pain point. This type of decision is always challenging.

The one feature that Surreal doesn’t do well right now is the photo gallery editor. It works great with raw HTML/CSS, but as soon as you attach Lightbox or another library it requires a JavaScript shim. In hindsight, this was a poor decision as many users found it too complex to integrate. For that reason, I’m thankful I never introduced a similar feature for navigation.

The good news, however, is that we are moving in a direction that gives you a lot more control over structured content. The blocks feature in 7.0 will make this possible:

<!-- A content boundary defines where blocks can be inserted and rearranged -->
<nav class="cms-boundary" id="navigation">

  <!-- Repeatable regions no longer have to be inside editable regions -->
  <div class="cms-repeat">
    <!-- Both of the following elements are editable, but can't be removed from the block -->
    <a href="#" class="cms-editable">Home</a>
    <span class="cms-editable">Takes you to the homepage</span>

  <!-- More repeatable items here... -->


In this example, you have complete control over the structure of your content. Combined with repeatable regions, this is extremely powerful.

I believe blocks will solve complex problems such as navigation and photo galleries in an elegant way and, importantly, using the same UI principles that clients are already familiar with.

On top of that, I have a handful of post-release ideas that will help automate things like navigation, but I don’t want to get too far ahead of myself :slight_smile:


Please see this post for a change to the proposed block syntax. You’ll still be able to accomplish this in a similar manner :slight_smile: