Dynamic menu through use of repeater

Question

I am using a repeater to create a menu (Bootstrap styled). I need to initially make the first item active and can't figure out how. This is what I have:

<!-- Nav tabs -->
<ul id="teamTab" class="nav nav-pills pill-marg" role="tablist">
    <asp:Repeater runat="server" ID="rptMenu">
        <ItemTemplate>
            <li role="presentation">
                <a class="circular" href='#<%# DataBinder.Eval(Container.DataItem, "GroupAbbrev") %>' aria-controls="home"
                        role="tab" data-toggle="tab"><%# String.Format("{0}", Eval("GroupName").ToString().ToUpper()) %></a>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

To make the first menu item active, its style has to be "active", like:

<li role="presentation" class="active"><a class="circular" ...>

Answer 1

I think you can just add <%# Container.ItemIndex == 0 ? "active circular" : "circular" %> inside your repeater template (however its been years since I have used WebForms.

Example:

<!-- Nav tabs -->
<ul id="teamTab" class="nav nav-pills pill-marg" role="tablist">
    <asp:Repeater runat="server" ID="rptMenu">
        <ItemTemplate>
            <li role="presentation" class="<%# Container.ItemIndex == 0 ? "active" : "" %>">
                <a class="circular" href='#<%# DataBinder.Eval(Container.DataItem, "GroupAbbrev") %>' aria-controls="home"
                        role="tab" data-toggle="tab"><%# String.Format("{0}", Eval("GroupName").ToString().ToUpper()) %></a>
            </li>
        </ItemTemplate>
    </asp:Repeater>
</ul>

Syntax issues aside (if I have any), I know the index is available via ItemIndex, see the docs here.