const CrumbTemplate: React.SFC<{ uri: string, title: string, subTitle?: string }> = (info) => {


            const themeColors = appConfig.theme.colors
            const isUriDefined = (info.uri || "").length
            const _color = isUriDefined ? themeColors.normal.foreground : themeColors.hover.background
            const _borderBottom = isUriDefined ? "thin solid gray" : "none"
            const _cursor = isUriDefined ? "pointer" : "initial"

            return (
                <StackPanel
                    key={info.title}
                    itemsAlignV={Component.Alignment.center}
                    style={{ margin: "0", height: "auto" }}>

                    <HoverBox key={info.title}
                        style={{
                            padding: "0",
                            textDecoration: "none",
                            backgroundColor: "transparent",
                            color: _color,
                            borderBottom: _borderBottom,
                            cursor: _cursor
                        }}
                        hoverStyle={{
                            backgroundColor: "transparent",
                            textDecoration: "none",
                            borderColor: appConfig.theme.colors.hover.background,
                            color: appConfig.theme.colors.hover.background
                        }}>

                        <a key={info.title}
                            href={info.uri}
                            style={{
                                color: _color,
                                padding: "0.5rem",
                                paddingLeft: "0.1rem",
                                paddingRight: 0
                            }}>

                            <b style={{ marginRight: "0.25rem" }}>
                                {new String(info.title).toTitleCase()}
                            </b>

                            <i>
                                {new String(info.subTitle || "").toTitleCase()}
                            </i>

                            {_color}
                        </a>
                    </HoverBox>

                    <ArrowRight_4 style={{ height: "2.5rem", marginRight: "-0.5rem", marginLeft: "-0.5rem" }} />

                </StackPanel>
            )
        }

Warning: Each child in an array or iterator should have a unique "key" prop...
    in a (created by CrumbTemplate)
    in span (created by HoverBox)
    in HoverBox (created by CrumbTemplate)
    in div (created by StackPanel)
    in StackPanel (created by CrumbTemplate)
    ...