NavigationLink

'use client';
import { VStack, Text, NavigationStack } from '@swiftuijs/ui';
import { NavigationLink } from '@swiftuijs/ui';
function DetailPage() {
    return (<VStack spacing={20}>
      <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>Detail Page</Text>
      <Text>This is a detail page navigated from NavigationLink</Text>
      <NavigationLink dismiss>Go Back</NavigationLink>
    </VStack>);
}
export default function Example() {
    return ((<NavigationStack style={{ height: 420 }}>
      <VStack spacing={20}>
        <NavigationLink destination={DetailPage}>
          <Text>Go to Detail</Text>
        </NavigationLink>
      </VStack>
    </NavigationStack>));
}

Usage and limitations

• Component destinations require a NavigationStack with a bounded height. URL destinations render a normal a element and follow browser navigation.
• Component/dismiss links render buttons. Put text or non-interactive content inside; do not nest a Button, link or other control.
• Use dismiss to go back, or call useNaviContext().dismiss() from a page. For conditional navigation, render a link only when the destination is available, or call the navigation context after validating.
• pageOptions.type is page (default) or actionsheet. The latter is a legacy navigation presentation; use Sheet for modal focus isolation and ConfirmationDialog for a list of actions.
• This is in-memory navigation. Browser history, routes and deep links need application integration.

Transitions

Pass pageOptions={ transition: { type: 'fade', duration: 200 } }. The same configuration is accepted by StandardPage.transition.

View Transitions need browser support; unsupported browsers use CSS animation fallbacks. Shared elements such as images/cards must use matching names on both pages. Avoid duplicate names within one rendered page.

See StandardPage for titles and toolbars and NavigationStack for path control.