Feature - Tabs

Tabbed content with nested Block Lists allowing text, images, and other features within each tab

Example Tabs#

Each tab can contain multiple features including text, images, and other content blocks

Feature Content Title - One - A

Feature Content Description - One - A

Feature Content Text - One - A

An Image

Here is a lovely image

Feature Content Title B

Text One - B

Feature Content Title - Two - A

Feature Content Description - Two - A

Text Two - A

Another image

Text Two - B

Tabs use a nested Block List structure: tabs contain tab items, each tab item contains its own Block List of features.

featureTabs.cshtml#

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage<BlockGridItem>
@using Umbraco.Cms.Core.Models.Blocks;

@{
    Layout = "_Layout_Features.cshtml";
    var content = Model.Content;
    var tabItems = content.Value<IEnumerable<BlockListItem>>
        ("FeaturePropertyTabs")?.ToList();
}

<div class="card">
    @if (tabItems != null && tabItems.Any())
    {
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" role="tablist">
                @foreach (var tab in tabItems.Select(t => t.Content))
                {
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab"
                                data-bs-target="#n@(tab.Key.ToString("N"))">
                            @tab.Value("featurePropertyTabTitle")
                        </button>
                    </li>
                }
            </ul>
        </div>
        <div class="tab-content card-body">
            @foreach (var tab in tabItems.Select(t => t.Content))
            {
                // ... tab-pane with nested Block List content
            }
        </div>
    }
</div>