How to create ASP.NET user/server control that uses a list of asp:ListItem as child controls?

Question

I am looking to create a user/server control that will be created with something like the following:

Answer 1

Use an asp:Repeater then bind it to a List of the objects you want in your breadcrumb. You can use the template to customize the items themselves and the separators.

Answer 2

You can add a property on a user control's code behind like:

[PersistenceMode(PersistenceMode.InnerProperty)]
public List<ListItem> Items
{
    get;
    set;
}

Your markup would then be:

<my:MyListControl runat="server">
  <Items>
    <asp:ListItem/>
  </Items>
</my:myListControl>

To make it so ListItem can be your own list item (Which I recommend doing as opposed to using asp.net.) You'll want to create your own class.

Here's an example of a Server Control I use (I removed a lot of the noise as such this is just a skeleton):

   [ToolboxData("<{0}:Menubar runat=server></{0}:Menubar>")]
    [System.ComponentModel.DesignTimeVisible(false)]
    public class Menubar : WebControl, IPostBackEventHandler
    {

        private List<MenuItem> _menuItems = new List<MenuItem>();
        [PersistenceMode(PersistenceMode.InnerProperty)]
        public List<MenuItem> MenuItems
        {
            get
            {
                return _menuItems;
            }
        }

    }
    [ToolboxItem(false)]
    [ParseChildren(true, "MenuItems")]
    public class MenuItem
    {
        private string _clientClick;
        private List<MenuItem> _menuItems = new List<MenuItem>();

        [Localizable(true)]
        public string Title { get; set; }
        public string Href { get; set; }
        public string Id { get; set; }
        [PersistenceMode(PersistenceMode.InnerDefaultProperty)]
        public List<MenuItem> MenuItems
        {
            get { return _menuItems; }
            set { _menuItems = value; }
        }
    }

Now I can use this like:

<my:Menubar runat="server" ID="menuBar">
    <MenuItems>
        <my:MenuItem Title="Save" Href="javascript:saveItem(this);"  />
        <my:MenuItem Title="Print" Href="javascript:void(0);">
            <MenuItems>
                <my:MenuItem Title="Preview" Href=""/>
                <my:MenuItem Title="To Pdf" Href="javascript:"/>
            </MenuItems>
        </my:MenuItem>
    </MenuItems>
</my:Menubar>