Complex object binding to a Blazor component as a Parameter

foo.razor

<h3>Foo</h3>

@if (NavItems != null && NavItems.Count() > 0)
{
<ul>
	@foreach (var item in NavItems)
	{
		<li>@item.Title</li>
	}
</ul>
} else
{
	<span>Loading...</span>
}


@code {

	[Parameter]
	public IEnumerable<BlazorApp2.Data.Nav> NavItems { get; set; }

}

index.razor

@page "/"
@using System.Text.Json

<h1>Hello, world!</h1>

Welcome to your new app.

<Foo NavItems="TheItems"></Foo>


@code {

	public List<BlazorApp2.Data.Nav> TheItems { get; set; }

	private string theJson = "...";

	protected override Task OnInitializedAsync()
	{

		var theNavs = JsonSerializer.Deserialize<BlazorApp2.Data.Nav[]>(theJson, new JsonSerializerOptions
		{
			PropertyNameCaseInsensitive=true
		});
		TheItems = theNavs;

		return base.OnInitializedAsync();

	}

}

Nav.cs

	public class Nav
	{

		public string Title { get; set; }

		public string Icon { get; set; }

		public string Url { get; set; }

	}